Accessibility.

What the kit does for you

• Every text color clears 4.5:1 contrast on the backgrounds it is used on, in both themes, and every control edge and mark clears 3:1. npm run check:contrast fails the build otherwise.
• Color is never the only signal: links are underlined, notes and status labels carry a shape and a word, and charts have a legend, direct labels, and a data table.
• The focus ring is 3px teal with a 2px gap on light grounds, mustard inside black panels and code, and black on mustard notes. It is never removed.
• Every control is a native element or has a role and keyboard handling. The interactive machine is a button that runs again on Enter or Space. Search opens with / or Ctrl+K, is a combobox whose results are read out as you move through them, and returns focus to its button when it closes.
• With reduced motion set, animations jump to their end state and the machine draws its settled pile. A machine that starts by itself finishes within five seconds; runs the reader starts keep their natural pace.
• The machine and the complex describe themselves to screen readers, including their current counts. Demo status lines are live regions.
• Equations render to MathML alongside the visual HTML, so screen readers can read them.
• Pages reflow at 320px wide and at 400% zoom without sideways scrolling; wide tables scroll inside their own frame.
• The first tab stop is a skip link past the top bar to the page title.
• On touch screens, tabs, small buttons, menu items, and slider rails grow to 44px. The compact 36px sizes are for mouse and trackpad.
• In Windows contrast themes, checks, radio balls, switches, the current tab, and status marks keep their shapes in system colors.
• A citation hover card stays open while the pointer is on it and closes with Escape.
• Pages print in the light theme, with black panels as ink on white and the site chrome left out. Fills that show a state, such as a primary button, a pressed segment, or a checked box, keep their ink on paper.

What you still have to do

• Write alt text for figures that says what the figure shows, not what it is ("Accuracy rises fastest for model A", not "Line chart").
• Give icon-only buttons a label.
• Keep headings in order. Skip no levels.
• Put the language on the page: <html lang="en">.
• Caption videos and give talks a transcript or slides.

Checklist for a new component

1. Works with keyboard only, in a sensible order, with visible focus.
2. Has a name, a role, and a state that a screen reader announces.
3. Passes contrast in light and dark.
4. Does not rely on color, hover, or motion to carry meaning.
5. Holds together at 320px and at 200% text size.