Accessibility

What the components already do, the contrast this theme reaches, and what stays with the person building the screen.

The components meet WCAG 2.2 AA as they ship: every control has a name, a focus ring and a keyboard path, and motion steps back when the system asks for less. That covers the parts. A screen built from them still has to be put together with care, and this page says where.

What the components already do#

Focus: One ring on every control, two pixels, visible on the page, on cards, in fields and in dark mode. It shows for the keyboard and stays away for the pointer.
Keyboard: Menus, tabs, selects, sliders and dialogs follow the patterns people already know. A dialog holds focus while it is open and returns it when it closes.
Names: Fields are tied to their labels, descriptions and errors. An error is announced when it appears, not only painted red.
Reduced motion: Movement, scale and blur become a short fade. Nothing that carries meaning is lost when the animation does not run.
Targets: Anything drawn smaller than 24px has a larger area to press, and 44px on a touch screen.
Zoom: Text sizes are in rem and layouts reflow. At 200% zoom and at 320px wide nothing is clipped or covered.

Contrast, measured#

Read from this system's theme and worked out for both modes. Text needs 4.5:1, a focus ring or the edge of a control needs 3:1. Every text pair, including status colours, is on the Colors page.

Pair	Needs	Light	Dark
Body text on the pageforeground on background	4.5:1	17.3:1Passes	16.7:1Passes
Secondary text on the pagemuted-foreground on background	4.5:1	5.7:1Passes	7.6:1Passes
Text on a cardcard-foreground on card	4.5:1	19.2:1Passes	14.9:1Passes
Secondary text on a cardmuted-foreground on card	4.5:1	6.3:1Passes	6.7:1Passes
Text in a menu or dialogpopover-foreground on popover	4.5:1	19.2:1Passes	14.9:1Passes
Label on the primary buttonprimary-foreground on primary	4.5:1	16.2:1Passes	16.9:1Passes
Label on a secondary buttonsecondary-foreground on secondary	4.5:1	16.5:1Passes	13.1:1Passes
Error textdestructive on background	4.5:1	4.7:1Passes	6.0:1Passes
Focus ring against the pagering on background	3:1	4.7:1Passes	17.8:1Passes

Keyboard#

Key	What it does
`Tab`	Moves to the next control. Shift Tab moves back. The order follows the page, left to right, top to bottom.
`Enter`	Presses a button, follows a link, sends a form from any of its fields.
`Space`	Presses a button, ticks a checkbox, flips a switch.
`↑↓`	Move inside a menu, a list, a radio group or a select. Home and End jump to the first and last.
`←→`	Move between tabs, toggles and slider steps.
`Esc`	Closes the top overlay and puts focus back on what opened it.
`⌘K`	Opens search from anywhere. Ctrl K on Windows and Linux.

What stays with you#

No component can do these. They are decided on the screen, each time.

One h1, then in order: Headings follow the structure of the page and never skip a level to get a size. Size is set with a class.
Every field has a label: A visible one. A placeholder is an example of a value and disappears the moment it is needed.
Images say what they show: Alt text for anything that carries information, an empty alt for decoration.
Never colour alone: A status has a word or an icon next to its colour. A chart series has a label or a pattern as well as a hue.
Errors name the fix: What went wrong and what a valid value looks like, next to the field, announced when it appears.
Links say where they go: The words of the link make sense read alone. Never click here.
The page has a title and a language: The tab says where you are, and the lang attribute matches the words on the page.

Rules#

A status is a colour and a word

About one in twelve men cannot tell red from green. The word carries the meaning, the colour makes it quick.

PaidOverdue

Do. Read in greyscale, the two still differ.

Don't. Two dots. Without the hue they are the same dot.

The focus ring is never removed

It is restyled through the theme's ring colour if it has to change. Without it, a keyboard user cannot see where they are.

Do. The ring as the system draws it.

Don't. outline: none with nothing in its place. Focus is somewhere on this page.

Before a screen ships#

Keyboard only: Do the main task without a pointer. Focus is always visible and never lands behind a sticky bar or a closed panel.
200% zoom, 320px wide: Nothing is cut off, nothing overlaps, nothing needs sideways scrolling.
Reduced motion on: Every state change is still clear with the animation off.
A screen reader, once: VoiceOver or NVDA through the main task. Each control says what it is, what state it is in and what it does.
Longest real content: A long name, a long translation, an empty list, a failed request. See States.