Barrierefreie Webseiten bauen: Tastatur, Semantik und ARIA

Kurz: Barrierefreie Seiten lassen sich mit Tastatur, Screenreader und bei Sehschwäche bedienen. Das meiste erreicht man durch sauberes HTML, nicht durch Zusatzcode.

1. Semantisches HTML

Echte Elemente bringen Verhalten und Bedeutung mit:

• <button> statt <div onclick> (Tastatur, Fokus und Rolle sind eingebaut).
• <a href> für Links, <nav>, <main>, <header>, <footer>, <h1> bis <h6> in sinnvoller Reihenfolge.
• <label for="…"> zu jedem Eingabefeld.
• Listen als <ul>/<ol>, Tabellen mit <th>.

2. Tastatur

Alles muss ohne Maus gehen: Mit Tab durch, Enter/Leertaste auslösen, Esc schließt Dialoge. Der Fokus muss sichtbar sein (nie outline: none ohne Ersatz). Dialoge halten den Fokus, bis sie schließen.

3. Alternativtexte und Kontrast

• Bilder: alt="…" beschreibt den Inhalt, bei reiner Dekoration alt="".
• Farbkontrast mindestens 4,5:1 für Text, siehe WCAG und Farbkontrast. Information nie nur durch Farbe.
• Text muss sich vergrößern lassen (bis 200 %), ohne dass etwas verloren geht.

4. ARIA, aber sparsam

ARIA ergänzt, wo HTML nicht reicht (aria-label, aria-expanded, role="dialog", aria-live für Statusmeldungen). Die erste Regel: Kein ARIA ist besser als falsches ARIA. Wo ein passendes HTML-Element existiert, das nutzen.

5. Testen

Mit Tastatur durchklicken, Seite auf 200 % zoomen, einen Screenreader ausprobieren (NVDA, VoiceOver), Werkzeuge wie Lighthouse oder axe ergänzen das, finden aber nur einen Teil der Fehler.

Recht

Für viele Angebote gilt seit 2025 das Barrierefreiheitsstärkungsgesetz (BFSG).

Siehe auch: UX