Accessibility

A family is the most varied group you can design for. Lena is nine and reads slowly. Oma Grete sees less well and taps less precisely. Tobias drives the Mac by keyboard. Everyone uses the same app.

So accessibility is not a check at the end. It lives in the tokens.

The test question

Could a nine-year-old use this alone?

This question applies to every view. Children take part; they are not an audience (principle 5). If Lena cannot find, hit or understand her checkmark, the view is not done.

Contrast

• Body text and controls: at least 4.5:1.
• Surfaces, outlines, dashed borders, focus ring: at least 3:1.
• Both modes are computed, not estimated.

Where a row falls below the limit, that is an open defect, not an exception. The state of grey and disabled is described in the Colour chapter.

Colour is never alone

No information depends on colour alone.

• A person colour always with an initial or a name.
• The kind of card always also through the symbol of the thing.
• “No one responsible” is a dashed outline and a pill with text, such as “Kein Fahrer” (no driver).
• A suggestion is dashed and carries the line “Vorschlag von Albert” (suggestion from Albert).

That way Hey Albert works for people with colour vision deficiency and in greyscale.

Target sizes

Whatever children operate is at least 56. That applies in the children’s area, when ticking off and with the coins (Taler). An icon alone is never the target; the whole row or the whole button is.

Focus and keyboard

• Focus is always visible, but only through :focus-visible: a ring in --rand-fokus, --fokus-ring wide, with --fokus-abstand.
• Whoever taps with mouse or finger sees no ring.
• On the Mac everything works by keyboard, including drag and drop: a card can be moved into another lane without a mouse.
• The order follows reading: header, filters, content, sidebar.

Screen readers

• Icons next to text are decorative and invisible to VoiceOver (aria-hidden).
• Icons on their own, such as the three circles in the header (bell, messages, plus), need a label.
• A card should read out as a whole: kind, title, time, place, people, state. For example: “Fahrt. Rückfahrt Auswärtsspiel, 14:00 bis 14:30. Felix. Kein Fahrer.”
• Buttons say what happens: “Ich fahre” (I’ll drive), not “OK”.
• Images that say something have alt text; decorative ones get alt="".

Text sizes

• In the app every size follows Dynamic Type. That is part of the definition of done: whoever has set larger text gets it everywhere.
• Cards grow in height. Buttons never wrap to two lines: if space runs out, the Knopfreihe stacks them.
• On the website, zoom up to 200 % must work without horizontal scrolling.

Motion

With reduced motion every duration is zero and the skeleton does not breathe. Nothing blinks, nothing runs on its own. More in the Motion chapter.

Plain language

Text is part of accessibility.

• One thought per sentence. Short words, verbs instead of nouns.
• Errors and empty states say three things: what belongs here, why it is empty, what you can do – with one button.
• Children read in the reader register (Vorleser), in three stages: small (6–9), middle (10–12), large (13+). The limits per register are in the Voice chapter.

A view is done only with

The design-pruefer agent checks views against this list. The brand QA (pnpm qa in the design system) finds hex values, shadows, forbidden words, exclamation marks and images without alt text.