This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site's quality by simply including it as an external stylesheet.

Use <button> if you can count on JavaScript being available, and flipping the switch has an immediate effect.
Use <input type="checkbox" if you want to progressively enhance the control, and flipping the switch will only take effect when the user submits it.

The post explains how.

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.

When to use a GUI Toolkit, is it more native than the web? It means some criteria the author defines. Also what level of WCAG conformance can someone hope for?

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

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 });

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.

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