ARIA-Rollen & Barrierefreiheit

Barrierefreiheit bedeutet, dass Websites für alle Menschen zugänglich sind – auch für diejenigen, die mit Screenreader oder Tastatur arbeiten. HTML bringt dafür schon viel mit, aber mit ARIA kannst du gezielt nachhelfen, wenn semantische Elemente allein nicht ausreichen.

Was ist ARIA?

ARIA steht für Accessible Rich Internet Applications und erweitert HTML um Attribute, mit denen du beschreiben kannst, was ein Element ist oder wie es sich verhält – besonders dann, wenn du eigene UI-Komponenten baust (z. B. Menüs, Tabs, Slider).

Wichtig

Nutze ARIA nur, wenn wirklich nötig. Native HTML-Elemente wie <button> , <nav> oder <form> sind bereits barrierefrei und brauchen keine zusätzlichen Rollen.

Wichtige ARIA-Rollen-Typen

ARIA-Rollen lassen sich grob in vier Gruppen einteilen. Diese helfen Screenreadern, die Struktur und Bedeutung deiner Seite zu verstehen.

Rollen-Typ	Beispiele	Bedeutung
Landmark Roles	`banner` , `navigation` , `main` , `complementary` , `contentinfo`	Definieren Hauptbereiche der Seite (Header, Navigation, Hauptinhalt, Footer usw.).
Widget Roles	`button` , `checkbox` , `tab` , `slider` , `dialog`	Interaktive Elemente, die Benutzereingaben oder Aktionen ermöglichen.
Document Structure Roles	`article` , `heading` , `list` , `table` , `separator`	Beschreiben die inhaltliche Struktur – ähnlich wie semantische HTML-Tags.
Live Region Roles	`alert` , `status` , `log`	Teilen Screenreadern dynamische Änderungen mit, z. B. bei AJAX-Inhalten.

Tipp

Die meisten modernen Screenreader erkennen Landmark-Rollen automatisch, wenn du die passenden HTML5-Tags nutzt. Zum Beispiel entspricht <header> automatisch der Rolle banner .

Wie ARIA funktioniert

Das zentrale Attribut ist role . Damit sagst du Screenreadern, welche Funktion ein Element hat - unabhängig vom Tag selbst.

HTML

<div role="button">
    Menü öffnen
</div>

Ein <div> hat normalerweise keine Bedeutung. Durch role="button" weiß der Screenreader: Das ist ein Button. Damit das Element auch per Tastatur erreichbar ist, ergänzt du außerdem:

HTML

<div role="button" tabindex="0">
    Menü öffnen
</div>

tabindex="0" bedeutet: Das Element ist über die Tab -Taste erreichbar.

Tastaturnavigation und Fokus

Die Tab -Taste springt durch alle fokussierbaren Elemente. Damit das sinnvoll funktioniert, ist eine korrekte Semantik oder ARIA-Rolle entscheidend. Browser erkennen automatisch Schaltflächen, Links und Formulareingaben – aber nicht selbstgebaute Elemente.

Tipp

Wenn du per Tastatur navigierst, sollte immer klar sichtbar sein, welches Element aktuell den Fokus hat. Das kannst du über CSS steuern:

[tabindex]:focus, button:focus {
    outline: 2px solid orange;
}

Häufige ARIA-Attribute

Neben role gibt es weitere Attribute, die den Zustand eines Elements beschreiben:

Attribut	Bedeutung	Beispiel
`aria-label`	Alternativer Text für Screenreader	`<button aria-label="Menü öffnen">☰</button>`
`aria-expanded`	Zeigt an, ob ein Bereich geöffnet oder geschlossen ist	`<button aria-expanded="false">Menü</button>`
`aria-hidden`	Versteckt Elemente vor Screenreadern (z. B. Deko-Icons)	`<span aria-hidden="true">★</span>`
`aria-current`	Markiert das aktuelle Element in einer Navigation	`<a aria-current="page">Startseite</a>`
`aria-disabled`	Markiert ein Element als deaktiviert, ohne es aus dem Tab-Focus zu entfernen	`<button aria-disabled="true">Absenden</button>`
`aria-labelledby`	Verknüpft ein Element mit einem anderen, das als Label dient	`<section aria-labelledby="titel"><h2 id="titel">...</h2></section>`
`aria-describedby`	Verknüpft ein Element mit einem beschreibenden Text (z. B. Hinweis unter einem Formularfeld)	`<input aria-describedby="hinweis"> <span id="hinweis">Mind. 8 Zeichen</span>`

ARIA in komplexeren Strukturen

ARIA kann auch ganze Bereiche strukturieren, etwa für Navigation, Tabs oder Dialoge:

HTML

<nav role="navigation" aria-label="Hauptnavigation">
    <ul>
        <li><a aria-current="page">Startseite</a></li>
        <li><a>Über uns</a></li>
    </ul>
</nav>

So kann ein Screenreader direkt ansagen: „Navigation, 2 Elemente, Startseite aktuell“ – ohne dass du JavaScript brauchst.

Live Regions

Wenn sich Inhalte dynamisch ändern – z. B. nach einem AJAX-Request oder bei Formularvalidierung – bekommt ein Screenreader das normalerweise nicht mit. Mit aria-live kannst du Bereiche als „lebendig" markieren:

Wert	Bedeutung
`aria-live="polite"`	Screenreader wartet, bis der Nutzer fertig ist, und liest dann vor
`aria-live="assertive"`	Unterbricht sofort – nur für wirklich wichtige Meldungen
`aria-live="off"`	Standardwert – Änderungen werden nicht angesagt

HTML

<div aria-live="polite" aria-atomic="true">
                        <!-- Inhalt wird per JavaScript aktualisiert -->
                    </div>

aria-atomic="true" sorgt dafür, dass der Screenreader den gesamten Bereich vorliest – nicht nur den geänderten Teil. Ohne aria-atomic würde er nur die neue Textstelle ansagen, was oft verwirrend klingt.

Tipp

Die Rollen role="alert" und role="status" verhalten sich wie eingebaute Live Regions – alert entspricht assertive, status entspricht polite. Du brauchst dann kein zusätzliches aria-live.

Zusammenfassung

Nutze native HTML-Elemente immer bevorzugt.
ARIA ergänzt nur dort, wo HTML keine passende Bedeutung bietet.
role beschreibt was ein Element ist.
aria-* -Attribute beschreiben wie es sich verhält.
tabindex und sichtbare Fokus-Stile sichern die Tastaturnavigation.
aria-live macht dynamische Inhalte für Screenreader sichtbar.

Teste es selbst

Wende das Gelernte direkt an - probiere die Codes aus dem Tutorial aus oder experimentiere mit eigenen Ideen.

Editor öffnen

Mehr aus HTML

Tutorials werden geladen...