# A11y Leitfaden für Crumbforest (Barrierefreiheit)

> Eulencode: ruhig, klar, kindgerecht. Ziel: Jede\*r kann mitspielen – mit Maus, Tastatur, Screenreader, Touch, langsamem Netz oder offline.

---

## 1) Was ist A11y?

**A11y** ist das Numeronym für **Accessibility** (Barrierefreiheit): **A** + 11 Buchstaben + **y**. In formalen Texten nutzen wir den Begriff **Barrierefreiheit**.

**Warum?** Weil Kinder (und Erwachsene) sehr verschieden sind: Sehen, Hören, Motorik, Kognition, Sprache, Kultur, Geräte, Netz – und dennoch sollen alle Fragen stellen können.

---

## 2) Leitprinzipien (POUR)

* **Wahrnehmbar (Perceivable):** Inhalte sind lesbar/hörbar/verständlich (Kontraste, Untertitel, Vorlese‑Texte).
* **Bedienbar (Operable):** Alles geht per **Tastatur**; Fokus ist sichtbar; keine „Traps“.
* **Verständlich (Understandable):** Klare Sprache, konsistente Navigation, verständliche Fehlermeldungen.
* **Robust (Robust):** Funktioniert mit Hilfstechnologien (Screenreader) und in unterschiedlichen Browsern/Geräten.

---

## 3) Quickstart – Top‑10 für den Prototyp

1. **Tastatur zuerst:** Tab‑Reihenfolge logisch; Enter/Space aktivieren; Esc schließt Dialoge.
2. **Sichtbarer Fokus:** Immer klarer Fokus‑Ring, auch im Unity‑Menü.
3. **Kontrast:** Text ≥ **4.5:1**, großer Text ≥ 3:1.
4. **Überschriftenstruktur:** H1→H2→H3 ohne Sprünge.
5. **Alternativtexte:** Sinnvolle `alt`‑Texte bei Bildern/Badges.
6. **Formulare:** Label gebunden; Fehlermeldungen in Klartext; nicht nur Farbe als Signal.
7. **Bewegung reduzierbar:** „**Ruhiger Modus**“ + respektiere `prefers-reduced-motion`.
8. **Untertitel/Transkript:** Für Audio/Video.
9. **Sprache & RTL:** `lang`‑Attribut; RTL‑Layout möglich; IME/On‑Screen‑Keyboard.
10. **Offline‑fähig:** Kerninhalte im PWA‑Cache; keine Captcha‑Hürden.

---

## 4) Web/PWA – Umsetzungsnotizen

* **Semantik:** Buttons sind `<button>`, Links sind `<a>`; Landmark‑Rollen (`<main>`, `<nav>`, `<header>`…).
* **ARIA sparsam:** Erst Semantik, dann ARIA; keine ARIA‑Anti‑Patterns.
* **Fokusmanagement:** Beim Öffnen eines Dialogs Fokus in den Dialog; beim Schließen Fokus zurück.
* **Fehlerkommunikation:** `aria-live="polite"` für Inline‑Fehler/Hinweise.
* **Medien:** Lautstärke steuerbar; Autoplay aus; Untertitel/Transkript verfügbar.
* **Kontrast/Theming:** Hell/Dunkel; Farbbedeutung nie allein; Icon+Text.

---

## 5) Unity‑WebGL – Umsetzungsnotizen

* **Menü‑Navigation:** Alle Menüs per Tab/Shift+Tab erreichbar; Auswahl per Enter/Space; sichtbarer Fokus.
* **Remap:** Key‑Remapping ermöglichen (z. B. Pfeile/WASD/Enter/Esc).
* **Textgröße:** Skalierbar; Text‑Overflow vermeiden.
* **Untertitel:** Untertitelspur/Callouts für Audio‑Hinweise.
* **Bewegung/Effekte:** Option für reduzierte Effekte; keine Strobe/Flacker.
* **Bridge:** A11y‑Events via `postMessage` an den Host (z. B. „focus-change“, „dialog-open“, „caption-on“).

---

## 6) Kiosk/Offline (Linux/RPi)

* **Start:** Chromium `--kiosk --force-device-scale-factor=1.25 --enable-webgl2 --use-gl=egl`.
* **Input‑Fallback:** On‑Screen‑Keyboard; große Ziel‑flächen.
* **Offline‑Packs:** Sprache/Assets im Cache; sauberer „Offline‑Hinweis“ statt Fehler.

---

## 7) Internationalisierung (i18n) & Eingaben

* **Lokalisierung:** Strings als Keys; Pseudo‑Locale in QA.
* **RTL:** Mirroring testen; Caret/Selektion korrekt.
* **IME:** Ostasiatische Eingaben; On‑Screen‑Keyboard verfügbar.

---

## 8) A11y‑Tests – minimal praktikabel

* **Manuell:**

  * [ ] Komplett per Tastatur bedienbar (ohne Maus).
  * [ ] Fokus‑Ring immer sichtbar.
  * [ ] Dialoge/Toasts fangen Fokus korrekt.
  * [ ] `Esc` schließt modale Dialoge.
  * [ ] Kontrastchecker zeigt ≥ 4.5:1.
  * [ ] Screenreader liest sinnvolle Reihenfolge/Labels vor.
  * [ ] „Ruhiger Modus“ reduziert Effekte hör‑/sichtbar.
* **Automatisiert (optional):** Lighthouse/Axe‑Checks; CI bricht bei kritischen Verstößen ab.

---

## 9) Komponenten‑Richtlinien

* **Buttons/Links:** Größe ≥ 44×44 px; Fokus/Hover klar; `aria-label` nur wenn Text fehlt.
* **Dialoge/Modale:** `role="dialog"`, `aria-modal="true"`, Fokus‑Trap, `Esc` schließt.
* **Tabs/Accordion:** Pfeiltasten‑Navigation; `aria-selected`, `aria-controls` korrekt.
* **Toasts/Alerts:** `role="status"`/`alert`; Timeout nicht zu kurz; per Tastatur schließbar.
* **Loader/Progress:** `role="progressbar"` mit `aria-valuenow`/`-min`/`-max`.

---

## 10) Sprache & Copy (kindgerecht)

* **Kurze Sätze.** Ein Begriff pro Satz, Fachwort erklären.
* **Fehlermeldungen:** „Was ist passiert? Was kann ich tun?“
* **A11y‑Label:** Vorlese‑Texte für Badges/Icons („Badge: Terminal‑Navigator\:in“).

---

## 11) Abnahme‑Kriterien (Vertical Slice)

* [ ] Komplett per Tastatur bedienbar (inkl. Unity‑Menü).
* [ ] Fokus ist sichtbar, logisch, rückkehrend.
* [ ] Kontraste erfüllt (AA).
* [ ] Untertitel/Transkript vorhanden.
* [ ] „Ruhiger Modus“ vorhanden; `prefers-reduced-motion` respektiert.
* [ ] DE/EN umschaltbar; `lang` gesetzt; On‑Screen‑Keyboard nutzbar.
* [ ] Offline‑Pack geladen; Fehlermodi freundlich.
* [ ] Screenreader liest Start‑/Hauptbereiche korrekt.

---

## 12) Incident & Pflege

* **Melden:** A11y‑Problem via Taste/Form; lokal puffern.
* **Reaktion:** Triage ≤ 72 h; Hotfix bei Blockern.
* **Versionierung:** Changelog, SemVer; A11y‑Checks als Release‑Gate.

---

## 13) Mini‑Glossar

* **A11y:** Barrierefreiheit (Accessibility).
* **i18n/l10n:** Internationalisierung/Lokalisierung.
* **Screenreader:** Vorlese‑Software (z. B. NVDA, VoiceOver).
* **ARIA:** Accessible Rich Internet Applications – Zusatzrollen/Attribute.

---

**Schluss:** Barrierefreiheit ist kein Extra. Sie ist unser Startpunkt (**0**). Jede Frage zählt – für alle.