Zugänglichkeit

Eine Familie ist die vielfältigste Gruppe, für die man gestalten kann. Lena ist neun und liest langsam. Oma Grete sieht schlechter und tippt ungenauer. Tobias bedient den Mac mit der Tastatur. Alle benutzen dieselbe App.

Zugänglichkeit ist deshalb kein Prüfschritt am Ende. Zugänglichkeit steckt in den Tokens.

Die Prüffrage

Könnte eine Neunjährige das allein benutzen?

Diese Frage gilt für jede Ansicht. Kinder sind Beteiligte, nicht Publikum (Leitsatz 5). Wenn Lena ihren Haken nicht findet, nicht trifft oder nicht versteht, ist die Ansicht nicht fertig.

Kontrast

• Fließtext und Bedienelemente: mindestens 4,5:1.
• Flächen, Konturen, gestrichelte Ränder, Fokusring: mindestens 3:1.
• Beide Modi werden gerechnet, nicht geschätzt.

Wo eine Zeile unter der Grenze liegt, ist das ein offener Fehler, keine Ausnahme. Den Stand zu Grau und Inaktiv beschreibt das Kapitel Farbe.

Farbe ist nie allein

Keine Information hängt nur an einer Farbe.

• Personenfarbe immer mit Initiale oder Name.
• Kartenart immer auch über das Symbol der Sache.
• „Ohne Zuständigen“ ist ein gestrichelter Rand und eine Pille mit Text, etwa „Kein Fahrer“.
• Ein Vorschlag ist gestrichelt und trägt die Zeile „Vorschlag von Albert“.

So funktioniert Hey Albert auch für Menschen mit Farbsehschwäche und in Graustufen.

Zielflächen

Was Kinder bedienen, ist mindestens 56 groß. Das gilt im Kinderbereich, beim Abhaken und bei den Talern. Ein Zeichen allein reicht nie als Ziel, die ganze Zeile oder der ganze Knopf ist das Ziel.

Fokus und Tastatur

• Fokus ist immer sichtbar, aber nur über :focus-visible: ein Ring in --rand-fokus, --fokus-ring breit, mit --fokus-abstand.
• Wer mit Maus oder Finger tippt, sieht keinen Ring.
• Auf dem Mac geht alles mit der Tastatur, auch Ziehen und Ablegen: Eine Karte lässt sich ohne Maus in eine andere Spur verschieben.
• Die Reihenfolge folgt dem Lesen: Kopf, Filter, Inhalt, Leiste.

Bildschirmleser

• Zeichen neben Text sind dekorativ und für VoiceOver unsichtbar (aria-hidden).
• Allein stehende Zeichen, etwa die drei Kreise im Kopf (Klingel, Nachrichten, Plus), brauchen ein Label.
• Eine Karte soll sich als Ganzes vorlesen lassen: Art, Titel, Zeit, Ort, Menschen, Zustand. Etwa: „Fahrt. Rückfahrt Auswärtsspiel, 14:00 bis 14:30. Felix. Kein Fahrer.“
• Knöpfe sagen, was passiert: „Ich fahre“, nicht „OK“.
• Bilder mit Aussage haben Alt-Text, schmückende alt="".

Textgrößen

• In der App folgen alle Grade Dynamic Type. Das gehört zur Definition von „fertig“: Wer größere Schrift eingestellt hat, bekommt sie überall.
• Karten wachsen in der Höhe mit. Knöpfe werden nie zweizeilig: Reicht der Platz nicht, stellt die Knopfreihe sie untereinander.
• Auf der Website muss Zoom bis 200 % ohne waagerechtes Wischen funktionieren.

Bewegung

Bei reduzierter Bewegung stehen alle Dauern auf null, das Skelett atmet nicht. Nichts blinkt, nichts läuft von selbst. Mehr im Kapitel Bewegung.

Einfache Sprache

Text ist Teil der Zugänglichkeit.

• Ein Gedanke je Satz. Kurze Wörter, Verben statt Hauptwörter.
• Fehler und leere Zustände sagen drei Dinge: was hierher gehört, warum es leer ist, was man tun kann – mit einem Knopf.
• Kinder lesen im Register Vorleser, in drei Stufen: klein (6–9), mittel (10–12), groß (13+). Die Grenzen je Register stehen im Kapitel Stimme.

Fertig ist eine Ansicht erst mit

Der Agent design-pruefer prüft Ansichten gegen diese Liste. Die Brand-QA (pnpm qa im Designsystem) findet Hex-Werte, Schatten, verbotene Wörter, Ausrufezeichen und Bilder ohne Alt-Text.