• 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,

1. The majority of your users don't have access needs
2. Accessibility is optional
3. Access needs come from permanent disabilities
4. Accessibility is a barrier to good design
5. Accessibility is hard to implement
6. React apps are inherently inaccessible
   7 Automated testing will catch all accessibility problems

aria-label and aria-labelledby are exclusive. So they can be enforced for components in typescript:

type ToggleSwitchProps = {
  name: string;
  checked: boolean;
  handleToggle: () => void;
  size?: "sm" | "lg" | "base";
  classNames?: string;
} & ({ ariaLabel: string; ariaLabelledBy: never } | { ariaLabel: never; ariaLabelledBy: string });

To my surprise they didn’t use skip links when they were presented one. [...] They didn’t understand the purpose of these links.

He explained that when he clicks on a link, for instance to an interesting article about skip links, he expects the first thing he encounters to be the article itself.

Instead of a "Skip to content", a "Skip to navigation" could be better.

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.

Use padding, relative line-height and a flow layout instead.

"When we design for disabilities we make things better for everyone"

The last version of the WCAG released the 5th of October

The studied website https://www.cop28.com/

As UI evolves, I think we will come one day with a UI library that can be customized entirely (hello white label design system).

Being able to test features on it should also be possible. It don't understand how all accessibility criteria can be tested though.

Le guide d'Orange contenant un certain nombre de ressources

One of my favorite things to do when stumbling upon a web page that uses an accessibility overlay is to use the overlay to increase the font size. I'm giving a 99.9% guarantee that this will cause the formatting on the page to break at some point. Couple that with increasing the line height and the letter spacing and you get a 100% return on your investment. Probably need to install a second overlay to fix this problem.

What happens on web pages when these three values are changed?

There are no shortcuts on accessibility at the moment

Why is there the first rule of ARIA? Because ->

I didn't push the thought to this point! The distinction between the focus indication area and the contrasting area is also pertinent.

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.