# Zugänglichkeit

> Hey Albert ist für eine ganze Familie gebaut, von Lena mit neun bis Oma Grete. Kontrast, Zielflächen, Fokus, Bildschirmleser, Textgrößen, Bewegung und einfache Sprache gehören zu jeder Ansicht, nicht ans Ende.

Quelle: https://brand.heyalbert.family/zugaenglichkeit/ · Hey Albert Marke und Designsystem

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.

| Vorne | Hinten | Hell | Urteil | Dunkel | Urteil |
| --- | --- | --- | --- | --- | --- |
| tinte | grund | 15,62:1 | AAA | 16,43:1 | AAA |
| tinte | karte | 14,27:1 | AAA | 13,13:1 | AAA |
| grau | grund | 4,83:1 | AA | 7,44:1 | AAA |
| grau | karte | 4,41:1 | 3:1 | 5,94:1 | AA |
| text-inaktiv | grund | 2,47:1 | zu schwach | 4,06:1 | 3:1 |
| text-auf-gelb | gelb | 6,85:1 | AA | 6,85:1 | AA |
| text-auf-blau | blau | 10,94:1 | AAA | 10,94:1 | AAA |
| text-auf-rosa | rosa | 10,55:1 | AAA | 10,55:1 | AAA |
| text-auf-leiste | schwarz | 15,65:1 | AAA | 17,28:1 | AAA |
| knopf-primaer-text | knopf-primaer-flaeche | 15,65:1 | AAA | 15,65:1 | AAA |
| rand-offen | grund | 4,47:1 | 3:1 | 9,21:1 | AAA |
| rand-vorschlag | grund | 4,83:1 | AA | 7,44:1 | AAA |
| rand-fokus | grund | 4,47:1 | 3:1 | 9,21:1 | AAA |

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/#kontrast).

## 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

| Token | CSS | Wert | Dunkel | Bedeutung |
| --- | --- | --- | --- | --- |
| ziel-zeiger | var(--ziel-zeiger) | 28px |  |  |
| ziel-finger | var(--ziel-finger) | 44px |  |  |
| ziel-kind | var(--ziel-kind) | 56px |  |  |

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.

> **Offen**
>
> Wie die festen Grade aus den Tokens auf die Stufen von Dynamic Type abgebildet werden, ist nicht dokumentiert. Die App liegt noch nicht im Monorepo (`apps/apple`). Die Tabelle gehört hierher, sobald sie umgezogen ist.

## Bewegung

Bei reduzierter Bewegung stehen alle Dauern auf null, das Skelett atmet nicht. Nichts blinkt, nichts läuft von selbst. Mehr im Kapitel [Bewegung](/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](/stimme/).

| Register | Wo | Kennzeichen | Wörter je Satz Ø / max |
| --- | --- | --- | --- |
| R1 · Der Erzähler | Website, Landingpages, Onboarding, Manifest, Modulnamen, Release-Notes | Merksätze, Kontrastpaare, konkrete Bilder aus dem Familienleben | 9 / 18 |
| R2 · Der Family Manager | Die tägliche Oberfläche für Erwachsene: Knöpfe, Etiketten, Hinweise, Briefings | Knapp und handlungsorientiert | 8 / 12 |
| R3 · Der Vorleser | Alle Kinderansichten, in drei Stufen: klein 6–9, mittel 10–12, groß 13+ | Kurz, bildhaft, in der Gegenwart | 6 / 10 |
| R4 · Der Sachbearbeiter | Safe, Verträge, Fristen, Finanzen, Steuern, Datenschutz, Rechtstexte | Präzise, nüchtern, vollständig | 10 / 14 |
| R5 · Der Briefeschreiber | Von Albert vorformulierte Antworten an Schule, Verein, Versicherung, Handwerker, Behörde | Nicht Alberts Stimme, sondern die der Familie | 12 / 18 |

Watch und Mitteilungen: höchstens sieben Wörter, das Wichtigste zuerst. Beispiel: „16:40 · Handball, Halle Süd.“

## Fertig ist eine Ansicht erst mit

- [ ] leerer Zustand
- [ ] Skelett statt Kreisel
- [ ] Tastatur und :focus-visible
- [ ] Handy und Tisch
- [ ] hell und dunkel als Token-Umschaltung
- [ ] optimistisches Update mit „Rückgängig“
- [ ] richtiges Register
- [ ] kein Hex-Wert
- [ ] Zielflächen 28/44/56

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.