kruemel/Crumb-Core-v.1
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
2fd60fdfd5b2afc62a6085dcd6a2c41ac778ffbb
Crumb-Core-v.1/docs/crumbforest/a11y_entry.md

5.8 KiB
Raw Blame History

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.