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.