Accessibility

What you get without asking

• Visible focus. A focus ring on every interactive element, sized and offset by tokens, in a color that works on whatever theme it lands in. It is never removed.
• A skip link. SkipLink is the first thing in the layout, so a keyboard user can jump past the nav to the content. It moves focus, not just the scroll position.
• Landmarks. header, nav, main and footer are real elements, so screen-reader users can jump between the regions of the page.
• Reduced motion. Every animation and transition is cut to nothing when the reader has asked their system for less motion.
• Sensible defaults for media. Images render alt="" unless you give them one, so a decorative image is announced as decorative rather than read out as a filename.
• Buttons that are buttons. Button renders a <button> or an <a> depending on whether it goes somewhere, so the keyboard behaves the way the reader expects.

What is still yours

1. Alt text. Only you know whether an image carries meaning. If it does, describe it. If it is decoration, leave alt unset and it renders empty, which is correct, not lazy.
2. Heading order. Use tag for the level and variant for the size. One h1 per page, and no skipping from h2 to h4 because the smaller size looked better.
3. Link text. "Read more" three times on a page tells a screen-reader user nothing. Say what it leads to.
4. Color contrast. If you change the swatches, check the result in every theme. Tokens make the change easy; they do not make it correct.

Checking your work

• Tab through the page. Every interactive thing should be reachable, in an order that makes sense, with a visible ring.
• Turn the mouse off for a minute. If you cannot open the menu, close the dialog or reach the footer, neither can a lot of people.
• Zoom to 200%. Fluid type and spacing hold up well here, but a fixed height you added might not.
• Run a checker. The browser's built-in accessibility panel catches contrast and missing-label problems in seconds.