A section tag start to be a generic région only when it is labelled. It provides semantics, but nothing else out of the box.

As developer it increase readability and allow to quickly set a specific landmark when needed.

Nice to get it right the first time with a minimal example

box-sizing does not work well with details and summary: it is implemented as shadow DOM in Chrome.

How many HTML tags do you know?

Dedicated to HTML :)

• use lang for the language of the page, then the other parts of the page with a different language
• support different writing direction. Logical CSS properties help.
• handle text expansion with adaptive layouts. Avoid to truncate the text.
• apply a minimum width to avoid text shrinking in other languages. Also think about the height.
• readable typography is important
• make sure every user-facing string is translated such as alt-text, title or desc nodes in SVG.
• different languages have different word order, so avoid string templates
• ensure consistency of microcopy

  Microcopy is all the little bits of text that appear throughout the site: the nav links, the sidebar headings, the form field labels, stuff like that. When microcopy is written and used consistently, the site layout becomes much more predictable, and users won't have to guess

It means the atoms and some molecules in atomic design.

Starting with the right HTML tags and using semantic HTML is a first easy step compared to retrofitting accessibility.

It related to landmarks, menus, checkboxes, buttons, headings, bold and italic texts,

Both Figma and Photoshop are for people who believe the web looks like an image.

Semantic HTML is a must. Because there is UX with HTML :D

Another thing our design tools really don’t give a shit about is accessibility. And to be honest, I think most of our industry doesn’t really care about accessibility as well.

Looks also valid to me.

The specialists who helped the architect in making sure it was certified did nothing else than ticking boxes. And this is exactly what most of us do when we think we make our sites accessible. We tick the WCAG boxes.

TL;DR nearly no website have valid HTML. We need validators and ways to integrate them in our development processes. It could allow us to tackle more serious challenges—like advancing accessibility—with collective vigor.

Maybe Cypress and test the different pages?
There is an NPM package dedicated to HTML checking https://www.npmjs.com/package/html-validate

Set options for an input field. Here some demo :)

They have an official one 😃

A template engine for HTML. It allows to build custom expression.

It is used by #FoundryVTT

Similar to microdata.

Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards. Instead of throwing away what works today, microformats intend to solve simpler problems first by adapting to current behaviors and usage patterns. - https://microformats.org/wiki/about

What is the difference between microformats and microdata? It seems that microdata is an extension of microformats. Also microdata is meant for HTML5, whereas microformats is meant for everything.

How to make an accessible skeleton with ARIA ?

Note that the skeleton pattern hides a bad design where the UI is slower than expected. So avoid it as much as possible.

Microdata is used to nest metadata within existing content on web pages: for example, a list of persons.

To create an item, such as a person, the itemscope attribute is used.
To add a property to an item, the itemprop attribute is used on one of the item's descendants.

1. Check if the image really needs a description. Maybe it is decorative. The W3C alt decision tree(opens in a new tab) is an excellent resource to help you categorize your photos.
2. Avoid writing "Image of", "Icon of", or "Picture of". Screen readers announce the presence of an image. Adding these words inside your alt is unnecessary.
3. Keep it as short as possible. Be specific but not overly descriptive.
4. Try to put the most essential information at the beginning of your description.