EMZETT.
Login

Emzett Wiki

Barrierefreie Webseiten: ARIA, Fokus und Tastaturbedienung

Properties1
tagsfrontend, barrierefreiheit

2 Min. Lesezeit

Barrierefreie Webseiten: ARIA, Fokus und Tastaturbedienung

Kurz: Barrierefreie Seiten lassen sich mit Tastatur und Screenreader vollständig bedienen; die wichtigste Regel lautet, zuerst die richtigen HTML-Elemente zu verwenden und ARIA nur zu ergänzen, wo HTML nicht reicht.

Genauer: Menschen nutzen Webseiten mit Screenreader, nur per Tastatur, mit Sprachsteuerung oder vergrößert. Barrierefreiheit hilft aber auch allen anderen: bei hellem Sonnenlicht, mit gebrochenem Arm oder im Lärm.

Im Detail

Semantisches HTML zuerst

  • <button> für Aktionen, <a href> für Navigation, nicht <div onclick>.
  • Überschriften <h1> bis <h6> in logischer Reihenfolge; Bereiche mit <nav>, <main>, <header>, <footer>.
  • Formulare mit <label for>; Bilder mit sinnvollem alt (dekorative: alt="").
  • Tabellen mit <th> und scope. Ein echtes <button> bringt Tastaturbedienung, Fokus und Rolle kostenlos mit.

Tastatur und Fokus

  • Alles Bedienbare muss mit Tab, Enter/Leertaste und Pfeiltasten erreichbar sein.
  • Sichtbarer Fokusrahmen (:focus-visible), nie einfach outline: none setzen.
  • Reihenfolge folgt dem Quelltext; tabindex="0" nur sparsam, positive Werte vermeiden.
  • Dialoge: Fokus hineinsetzen, im Dialog halten, mit Esc schließen, danach zurück zum Auslöser.
  • Skip-Link (“Zum Inhalt springen”) ganz oben.

ARIA richtig einsetzen

ARIA (Accessible Rich Internet Applications) ergänzt Rollen und Zustände: aria-label, aria-expanded, aria-live (Statusmeldungen), role="dialog". Regeln: Kein ARIA ist besser als falsches ARIA. ARIA ändert nur, was Hilfstechniken hören, nicht das Verhalten; Tastaturbedienung muss man selbst bauen. Neue Inhalte (Fehlermeldungen, Toasts) in einer Live-Region ankündigen.

Testen

  • Nur mit der Tastatur durchklicken.
  • Screenreader ausprobieren (NVDA, VoiceOver, TalkBack).
  • Kontrast prüfen (WCAG: 4,5:1 für Text).
  • Werkzeuge: Lighthouse, axe; sie finden etwa 30–40 % der Probleme, der Rest braucht Menschen.
  • Rechtlich relevant: Barrierefreiheitsstärkungsgesetz (BFSG) für viele digitale Angebote ab 28.06.2025.

Siehe auch: WCAG und Farbkontrast, Screenreader und assistive Technologien, Lighthouse und Core Web Vitals

Backlinks