Komponenten, die mit Tastatur und Screenreader funktionieren.
Sieben häufige Bausteine als Live-Demo zum Ausprobieren, jeweils mit den ARIA- und Tastatur-Anforderungen, Code zum Übernehmen und den Fehlern, die wir in Prüfungen am häufigsten sehen.
Drei Regeln vorweg
Native HTML zuerst
Ein button, ein details, ein dialog bringen Rolle, Zustand und Tastaturbedienung schon mit. ARIA ist für die Fälle, die HTML nicht abdeckt.
Tastatur ist Pflicht
Alles, was mit der Maus geht, muss auch mit Tab, Enter, Leertaste und, wo üblich, den Pfeiltasten gehen.
Zustand verraten
Offen oder zu, ausgewählt oder nicht: Was man sieht, muss auch ein Screenreader erfahren.
Alle Muster
Akkordeon
Inhalte auf- und zuklappen, Zustand per aria-expanded.
Tabs
Ein Bereich von mehreren, Wechsel mit den Pfeiltasten.
Modaler Dialog
Fokus beim Öffnen hinein, Escape schließt, Fokus zurück.
Navigation mit Untermenüs, die nicht nur mit der Maus funktioniert
Untermenüs per Button, Escape schließt, normale Links.
Karussell
Pause-Button, Vor/Zurück, Folienansage, kein Zwangs-Autoplay.
Fehlermeldungen, die helfen statt verwirren
Fehler als Text, verknüpft, mit Lösung und Fehlerübersicht.
Statusmeldungen, die ankommen, ohne den Fokus zu stehlen
Meldungen per Live-Region ansagen, ohne Fokuswechsel.