Barrierefreies Webdesign
Digitale Barrierefreiheit ist essenziell, um sicherzustellen, dass alle Menschen, einschließlich Nutzer mit Sehbehinderungen, das Internet problemlos nutzen können. Ein zentraler Bestandteil barrierefreier Webseiten ist das ARIA Labelling, das Screenreadern hilft, Elemente korrekt zu interpretieren.
Was ist ein ARIA-Label?
Das ARIA-Label ist ein Attribut aus den Accessible Rich Internet Applications (ARIA), das für die barrierefreie Gestaltung von HTML-Elementen eingesetzt wird. Es hilft dabei, Screen Readers wichtige Informationen zu liefern, die visuell nicht erkennbar sind.
Mit HTML-ARIA-Label können interaktive Elemente wie Buttons, Links oder Formulare klar beschrieben werden. Dadurch erhalten Nutzer mit Sehbehinderungen präzise Informationen über die Funktion oder Bedeutung eines Elements.
Unterschied zwischen aria-label, aria-labelledby und aria-describedby
| ARIA-Attribut | Bedeutung | Beispiel |
| aria-label | Fügt einem Element eine unsichtbare Beschriftung hinzu | <button aria-label="Suche starten"></button> |
| aria-labelledby | Verknüpft ein Element mit einer sichtbaren Beschriftung | <button id="search-btn" aria-labelledby="search-text"></button> <span id="search-text">Suche starten</span> |
| aria-describedby | Fügt eine ergänzende Beschreibung hinzu | <input type="text" aria-describedby="info"> <span id="info">Geben Sie Ihren Namen ein.</span> |
Während aria-label eine direkte Beschriftung definiert, verweist aria-labelledby auf ein anderes Label-Element, das den Inhalt beschreibt. Aria-describedby liefert zusätzliche Hinweise zur Nutzung eines Elements.
Warum ist ARIA Labelling wichtig für Barrierefreiheit?
Unterstützung für Screenreader-Nutzer
Assistive Technologien, wie Screen Readers lesen Webseiten vor und ermöglichen es Menschen mit Sehbehinderungen, Inhalte zu erfassen. Ohne ein korrektes ARIA-Label-Attribut bleibt die Funktion vieler interaktiver Elemente unklar.
Verbesserung der Nutzerfreundlichkeit
Buttons oder Icons, die keine Textbeschriftung haben, sind für sehende Nutzer verständlich, aber für Screenreader oft bedeutungslos. Mit Button-ARIA-Label erhalten diese Elemente eine klare Funktion.
Beispiel:
<button aria-label="Menü öffnen">☰</button>Hier beschreibt das ARIA-Label-Attribut, dass es sich um einen Menü-Button handelt.
ARIA und WCAG – Wie hängen sie zusammen?
Die Web Content Accessibility Guidelines (WCAG) definieren Anforderungen für barrierefreie Webseiten. ARIA-Attribute helfen, diese Kriterien zu erfüllen, insbesondere in den Bereichen Wahrnehmbarkeit und Bedienbarkeit.
WCAG-Erfolgskriterien und ARIA-Nutzung
WCAG-Kriterium | Bedeutung | ARIA-Bezug |
1.1.1 Nicht-Text-Inhalte | Bilder und Symbole müssen für Screenreader verständlich sein | aria-label="Suchsymbol" |
2.4.6 Überschriften und Labels | Navigationselemente benötigen klare Labels | aria-labelledby="nav-label" |
4.1.2 Name, Rolle, Wert | UI-Elemente müssen für assistive Technologien erkennbar sein | role="button" für klickbare Elemente |
Mit ARIA-Labels lassen sich diese Anforderungen umsetzen und Webseiten barrierefreier gestalten.
Wann und wo sollten ARIA-Labels verwendet werden?
- Bei Buttons ohne sichtbaren Text<button aria-label="Einstellungen öffnen">⚙</button>
- Für Formulare ohne sichtbare Beschriftung<input type="text" aria-label="Vorname eingeben">
- Für dynamische oder interaktive Elemente<div role="alert" aria-live="assertive">Achtung: Passwort ist unsicher!</div>
Wann sollte man ARIA nicht verwenden?
Nicht in allen Fällen ist ARIA die beste Lösung. In diesen Situationen sollte stattdessen semantisches HTML genutzt werden:
- Wenn ein<label> <label for="email">E-Mail-Adresse:</label><input type="email" id="email">
- <button>Senden</button> <!-- Kein aria-label notwendig -->
- Ein Beispiel für schlechte Nutzung:<a href="#" role="button">Mehr erfahren</a>Besser wäre:<button>Mehr erfahren</button>
ARIA-Role | Bedeutung | Einsatzbeispiel |
role="banner" | Definiert den Header | <header role="banner"> |
role="navigation" | Markiert die Navigation | <nav role="navigation"> |
role="main" | Hauptinhalt der Seite | <main role="main"> |
role="complementary" | Zusätzliche Inhalte | <aside role="complementary"> |