# Barrierefreiheit

Ziel ist WCAG 2.2 AA. Für zeitkritische Zustände ist Barrierefreiheit ein Sicherheitsmerkmal, kein späterer Qualitätsschritt.

## Mindestanforderungen

- Textkontrast mindestens 4,5:1.
- Große Schrift und grafische UI-Elemente mindestens 3:1.
- Tastaturzugriff auf jede Funktion.
- sichtbarer Fokus mit mindestens 3-Pixel-Ring.
- Touch-Ziele grundsätzlich 44 × 44 px.
- keine Information nur durch Farbe, Position oder Bewegung.
- Zoom bis 200 % ohne Informationsverlust.
- Reflow bei 320 CSS-Pixel Breite.
- verständliche Namen, Rollen und Zustände für Assistenztechnik.

## Status

Jeder Status enthält lesbaren Text. Punkt, Linie und Farbe unterstützen nur.

```html
<span class="gev-status gev-status--danger">
  Blockiert
</span>
```

Tabellen benötigen echte Kopfzellen. Zeitverläufe werden als geordnete Liste umgesetzt. Kennzahlen erhalten verständliche sichtbare Labels.

## Formulare

- Jedes Feld hat ein permanentes `<label>`.
- Pflichtfelder sind textlich und programmatisch erkennbar.
- Fehler werden am Feld und in einer Zusammenfassung angezeigt.
- `aria-describedby` verbindet Feld, Hinweis und Fehler.
- Eingaben bleiben bei Validierungsfehlern erhalten.
- Formatbeispiele stehen als Hinweis, nicht nur als Placeholder.

## Fokus und Dialoge

- Beim Öffnen eines Dialogs wechselt Fokus hinein.
- Beim Schließen kehrt Fokus zur auslösenden Aktion zurück.
- Escape schließt reversible Dialoge.
- Bei riskanten Aktionen ist `Abbrechen` die sichere Fokusvorgabe.
- Hintergrundinhalt ist während des Dialogs nicht erreichbar.

## Live-Aktualisierung

Nicht jede Datenänderung wird vorgelesen. Verwende:

- `aria-live="polite"` für gespeicherte Entwürfe oder neue Quellen;
- `role="alert"` nur für Fehler, die die aktuelle Aufgabe unmittelbar blockieren;
- sichtbare Änderungsmarkierung bei aktualisierten Werten;
- eine Zusammenfassung statt vieler einzelner Ansagen.

## Bewegung

`prefers-reduced-motion` wird vollständig respektiert. Blinkende Inhalte sind nicht zulässig. Automatisch rotierende Inhalte sind nicht zulässig.

## Testcheckliste

Vor Freigabe einer App:

1. komplette Kernaufgabe nur mit Tastatur ausführen;
2. Fokusreihenfolge und Fokusverlust prüfen;
3. 200-%-Zoom und 320-Pixel-Reflow prüfen;
4. Statusansicht in Graustufen prüfen;
5. Screenreader-Kurztest für Navigation, Tabelle, Formular und Dialog;
6. Hell- und Dunkelansicht prüfen;
7. `prefers-reduced-motion` und erzwungene Farben prüfen;
8. Fehlerzustände ohne vorgefüllte Daten prüfen.