ARIA-Labels und Landmarks: Barrierefreiheit für Screenreader richtig umsetzen

Screenreader sind für rund 1,2 Millionen blinde und sehbehinderte Menschen in Deutschland das primäre Werkzeug zur Nutzung von Websites. Damit Screenreader Inhalte korrekt interpretieren können, brauchen sie strukturierte Informationen — und genau hier kommen ARIA-Attribute ins Spiel. Seit dem Inkrafttreten des Barrierefreiheitsstärkungsgesetzes (BFSG) im Juni 2025 ist die korrekte Umsetzung für viele B2C-Websites keine Kür mehr, sondern gesetzliche Pflicht.

Was ist ARIA?

ARIA steht für Accessible Rich Internet Applications und ist eine W3C-Spezifikation, die HTML um zusätzliche Attribute erweitert. Diese Attribute vermitteln assistiven Technologien semantische Informationen, die im nativen HTML fehlen.

Moderne Webanwendungen verwenden komplexe UI-Patterns (Tabs, Modals, Accordions), die in reinem HTML keine semantische Entsprechung haben. Ein <div> mit Click-Handler ist für einen Screenreader unsichtbar — ARIA macht es erkennbar und bedienbar.

Wichtig: ARIA ändert weder das Aussehen noch das Verhalten eines Elements. Es ändert ausschließlich, wie assistive Technologien das Element wahrnehmen.

Semantisches HTML vs. ARIA-Landmarks

Die erste Regel von ARIA lautet:

Wenn du ein natives HTML-Element verwenden kannst, das die gewünschte Semantik bereits hat — verwende es. ARIA ist ein Fallback, kein Ersatz.

HTML5 bietet semantische Landmark-Elemente, die von Screenreadern automatisch erkannt werden:

HTML5-Element	ARIA-Entsprechung	Zweck
<header>	role="banner"	Seitenkopf mit Logo und Navigation
<nav>	role="navigation"	Navigationsbereich
<main>	role="main"	Hauptinhalt der Seite
<aside>	role="complementary"	Ergänzende Inhalte (Sidebar)
<footer>	role="contentinfo"	Seitenfuß mit Impressum, Links
<form>	role="form"	Formular (wenn mit Label versehen)
<section>	role="region"	Thematischer Abschnitt (mit Label)

<!-- Richtig: Semantisches HTML -->
<header>
  <nav aria-label="Hauptnavigation">
    <ul>
      <li><a href="/">Startseite</a></li>
      <li><a href="/produkte">Produkte</a></li>
    </ul>
  </nav>
</header>
<main><h1>Willkommen</h1></main>
<footer><p>Impressum | Datenschutz</p></footer>

<!-- Falsch: div-Suppe mit ARIA als Pflaster -->
<div role="banner">
  <div role="navigation"><a href="/">Startseite</a></div>
</div>

ARIA-Labels: aria-label, aria-labelledby, aria-describedby

Screenreader brauchen für interaktive Elemente einen zugänglichen Namen. Drei ARIA-Attribute stellen diesen bereit.

aria-label

Definiert einen unsichtbaren Text-Label direkt am Element. Verwende es, wenn kein sichtbarer Text vorhanden ist.

<button aria-label="Hauptmenü öffnen" aria-expanded="false">
  <svg><!-- Hamburger-Icon --></svg>
</button>
<input type="search" aria-label="Website durchsuchen" />

aria-labelledby

Verweist auf ein anderes Element, dessen Text als Label dient. Verwende es, wenn bereits ein sichtbarer Text existiert.

<h2 id="filter-heading">Produkte filtern</h2>
<form aria-labelledby="filter-heading">
  <label for="kategorie">Kategorie</label>
  <select id="kategorie"><option>Alle</option></select>
</form>

aria-describedby

Verknüpft ein Element mit einer zusätzlichen Beschreibung. Der Screenreader liest zuerst den Namen, dann die Beschreibung.

<label for="passwort">Passwort</label>
<input type="password" id="passwort" aria-describedby="pw-hint" />
<p id="pw-hint">Mindestens 8 Zeichen, ein Großbuchstabe und eine Zahl.</p>

Wann welches Attribut?

Situation	Attribut	Beispiel
Kein sichtbarer Text vorhanden	aria-label	Icon-Button, Suchfeld
Sichtbarer Text vorhanden	aria-labelledby	Formular mit Überschrift
Zusätzliche Erklärung nötig	aria-describedby	Passwort-Feld mit Hinweis
Sichtbares <label> vorhanden	for/id-Verknüpfung	Standard-Formularfeld

ARIA-Live-Regions für dynamische Inhalte

Single-Page-Applications und AJAX-Inhalte sind für Screenreader ein Problem: Wenn sich ein Teil der Seite ändert, bekommt der Screenreader das nicht automatisch mit. ARIA-Live-Regions lösen das.

<!-- Toast-Notification -->
<div aria-live="polite" aria-atomic="true" role="status" id="toast-container"></div>

<!-- Kritische Fehlermeldung -->
<div aria-live="assertive" role="alert" id="fehler-container"></div>

Attribut	Wert	Verhalten
aria-live	polite	Wartet, bis die aktuelle Ausgabe beendet ist
aria-live	assertive	Unterbricht sofort — nur für kritische Meldungen
aria-atomic	true	Liest den gesamten Container vor, nicht nur die Änderung
role	status	Impliziert aria-live="polite"
role	alert	Impliziert aria-live="assertive"

Wichtig: Das Live-Region-Element muss vor der Änderung bereits im DOM existieren. Dynamisch eingefügte aria-live-Elemente werden von vielen Screenreadern nicht erkannt.

Praktische Code-Beispiele

Hamburger-Menu

<button aria-label="Hauptmenü" aria-expanded="false"
        aria-controls="hauptmenue" id="menu-btn">
  <svg aria-hidden="true"><!-- Icon --></svg>
</button>
<nav id="hauptmenue" aria-label="Hauptnavigation" hidden>
  <ul role="list">
    <li><a href="/">Startseite</a></li>
    <li><a href="/kontakt">Kontakt</a></li>
  </ul>
</nav>

const btn = document.getElementById('menu-btn');
const menu = document.getElementById('hauptmenue');
btn.addEventListener('click', () => {
  const expanded = btn.getAttribute('aria-expanded') === 'true';
  btn.setAttribute('aria-expanded', String(!expanded));
  menu.hidden = expanded;
});

Modal-Dialog

<div role="dialog" aria-modal="true"
     aria-labelledby="modal-titel" aria-describedby="modal-desc">
  <h2 id="modal-titel">Datenschutzeinstellungen</h2>
  <p id="modal-desc">Wähle aus, welche Cookies du akzeptieren möchtest.</p>
  <button aria-label="Einstellungen schließen">Schließen</button>
</div>

Bei aria-modal="true" muss der Fokus im Dialog gefangen werden (Focus-Trap). Tastatureingaben außerhalb des Modals dürfen nicht möglich sein.

Tab-Navigation

<div role="tablist" aria-label="Produktdetails">
  <button role="tab" id="tab-1" aria-selected="true" aria-controls="panel-1">Beschreibung</button>
  <button role="tab" id="tab-2" aria-selected="false" aria-controls="panel-2" tabindex="-1">Bewertungen</button>
</div>
<div role="tabpanel" id="panel-1" aria-labelledby="tab-1"><p>Beschreibung...</p></div>
<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden><p>Bewertungen...</p></div>

Innerhalb der Tablist navigiert man mit Pfeiltasten zwischen Tabs. Nicht-aktive Tabs erhalten tabindex="-1", damit sie beim normalen Tab-Durchlauf übersprungen werden.

Häufige ARIA-Fehler

Die WebAIM Million-Studie 2025 zeigt: 68,6 % aller getesteten Homepages haben ARIA-bezogene Fehler. Seiten mit ARIA haben im Schnitt mehr Barrierefreiheitsfehler als Seiten ohne ARIA — weil ARIA häufig falsch eingesetzt wird.

Die goldene Regel: No ARIA is better than bad ARIA

Ein <div role="button"> ohne Tastaturunterstützung und ohne tabindex="0" ist schlimmer als ein simples <div> — weil der Screenreader es als Button ankündigt, es sich aber nicht wie einer verhält.

Fehler	Problem	Lösung
role="button" ohne tabindex	Nicht per Tastatur erreichbar	Natives <button> verwenden
aria-label auf <div>	Wird von Screenreadern ignoriert	Nur auf interaktive Elemente anwenden
Doppelte Labels	Sichtbarer Text wird von aria-label überschrieben	aria-label nur ohne sichtbaren Text
aria-hidden="true" auf Eltern	Alle Kinder versteckt, auch fokussierbare	Fokussierbare Kinder vorher entfernen
Fehlende aria-expanded Updates	Button sagt immer “eingeklappt”	JavaScript-State synchronisieren

Testen mit Screenreadern

Automatisierte Tests erkennen viele ARIA-Fehler, aber nicht alle. Manuelles Testen mit echten Screenreadern ist unverzichtbar.

Screenreader	Betriebssystem	Browser	Kosten
NVDA	Windows	Firefox, Chrome	Kostenlos (Open Source)
VoiceOver	macOS, iOS	Safari	Kostenlos (vorinstalliert)
Narrator	Windows	Edge	Kostenlos (vorinstalliert)

Schnelltest-Anleitung (10 Minuten)

1. Screenreader starten (NVDA: Strg+Alt+N, VoiceOver: Cmd+F5)
2. Landmark-Navigation testen: Springt der Screenreader zwischen Header, Nav, Main und Footer?
3. Überschriften-Navigation: Sind Überschriften in logischer Reihenfolge (h1, h2, h3)?
4. Formulare: Werden alle Felder korrekt mit Label angekündigt?
5. Interaktive Elemente: Funktionieren Buttons, Tabs und Modals per Tastatur?
6. Dynamische Inhalte: Werden Toast-Meldungen und Fehlerhinweise vorgelesen?

Ergänzend helfen Browser-Tools: Chrome DevTools Accessibility Tree (Elements > Accessibility Pane), Firefox Accessibility Inspector und die axe DevTools Extension.

ARIA und die BFSG-Pflicht

Das BFSG verweist auf die EN 301 549, die WCAG 2.1 Level AA als Standard festlegt. Mehrere WCAG-Erfolgskriterien betreffen ARIA direkt:

• 4.1.2 Name, Rolle, Wert (Level A): Alle UI-Komponenten müssen einen zugänglichen Namen und eine Rolle haben
• 1.3.1 Info und Beziehungen (Level A): Informationen müssen programmatisch bestimmbar sein
• 4.1.3 Statusmeldungen (Level AA): Statusmeldungen müssen ohne Fokusänderung vermittelt werden
• 2.4.6 Überschriften und Labels (Level AA): Müssen das Thema oder den Zweck beschreiben

Verstöße gegen diese Kriterien sind potentielle BFSG-Verstöße mit Bußgeldern bis zu 100.000 Euro.

Praxis-Checkliste

• Semantische HTML5-Elemente statt ARIA-Rollen verwenden (header, nav, main, aside, footer)
• Alle interaktiven Elemente haben einen zugänglichen Namen (aria-label oder sichtbarer Text)
• Formularfelder sind mit <label> und for/id verknüpft
• Dynamische Inhalte verwenden aria-live Regions
• Hamburger-Menu hat aria-expanded und aria-controls
• Modals verwenden role="dialog", aria-modal="true" und Focus-Trap
• Tab-Navigationen verwenden role="tablist", role="tab", role="tabpanel"
• Dekorative Bilder und Icons haben aria-hidden="true"
• Kein role="button" ohne tabindex="0" und Keyboard-Handler
• Manueller Screenreader-Test mit NVDA oder VoiceOver durchgeführt

ARIA automatisch prüfen lassen

Die manuelle Prüfung aller ARIA-Attribute ist zeitaufwendig. Der Compliso Scanner nutzt axe-core, um deine Website automatisch auf ARIA-Fehler zu prüfen — darunter fehlende Labels, falsche Rollen und fehlerhafte Live-Regions. Du erhältst einen konkreten Accessibility-Score mit priorisierter Fehlerliste.

Erfahre mehr über die Barrierefreiheitsprüfung von Compliso oder scanne deine Website jetzt kostenlos, um deinen aktuellen Stand zu sehen.