Was ist ARIA?
ARIA steht für „Accessible Rich Internet Applications“. Es handelt sich um einen W3C-Standard, der HTML um spezielle Attribute erweitert. Diese sogenannten WAI-ARIA-Attribute ermöglichen es, komplexe Webanwendungen wie Dropdown-Menüs, Modale oder Tabs auch für Screenreader und andere assistive Technologien zugänglich zu machen.
Warum ist ARIA notwendig?
Viele moderne Websites nutzen <div>– oder <span>-Elemente, die visuell wie Buttons oder Menüs aussehen – aus technischer Sicht jedoch keine semantische Bedeutung haben. Ohne zusätzliche Informationen können Screenreader die Funktion dieser Elemente nicht erkennen.
Ein Beispiel:
Ein visuell sichtbares, klickbares Element wird als <div> eingebunden. Ohne role="button" und entsprechende ARIA-Attribute bleibt es für assistive Technologien unsichtbar oder unverständlich.
ARIA ergänzt daher fehlende Semantik, wenn native HTML-Elemente nicht ausreichen.
Drei Kernfunktionen von ARIA
Rollen (Roles)
Mit dem Attributrolekann die Funktion eines Elements beschrieben werden. Zum Beispiel:role="button"– signalisiert, dass ein Element wie ein Button funktioniert.role="dialog"– kennzeichnet ein modales Fenster.role="navigation"– beschreibt einen Navigationsbereich.
Zustände (States)
Zustände geben den aktuellen Status eines Elements an. Beispiele:aria-expanded="true"– ein aufklappbares Element ist geöffnet.aria-checked="false"– eine Checkbox ist nicht aktiviert.aria-disabled="true"– ein Element ist deaktiviert.
Eigenschaften (Properties)
ARIA-Eigenschaften liefern zusätzliche Informationen. Typische Beispiele:aria-label="Suche"– ein unsichtbarer, aber maschinenlesbarer Name für ein Element.aria-labelledby="ueberschrift1"– verweist auf eine sichtbare Beschriftung.aria-describedby="infoText"– liefert eine zusätzliche Beschreibung.
Textbeispiele (in Fließtextform, ohne Codeblöcke)
Ein aufklappbares Akkordeon-Element kann mit folgenden Attributen ausgestattet sein:
Ein Button enthält aria-expanded="false" und aria-controls="panel1". Das zugehörige Panel hat die ID panel1 und ist zunächst verborgen.
Ein Dialogfenster kann so gekennzeichnet werden:
Ein div erhält role="dialog" und aria-modal="true", dazu ein Titel mit der ID dialog-title, der per aria-labelledby referenziert wird.
Eine dynamische Textanzeige (z. B. Statusmeldung) kann über aria-live="polite" mitgeteilt werden.
Vorteile und Risiken
Vorteile von ARIA:
ermöglicht barrierefreie Umsetzung komplexer Interfaces
verbessert die Verständlichkeit für Screenreader
ergänzt fehlende HTML-Semantik
Risiken bei falscher Nutzung:
Fehlende oder falsch gesetzte Rollen können zur Verwirrung führen.
Inhalte können durch
aria-hidden="true"für Screenreader vollständig ausgeblendet werden.Übermäßiger ARIA-Einsatz kann kontraproduktiv sein.
Wichtiger Grundsatz:
Nutze zuerst semantisches HTML. Verwende ARIA nur, wenn HTML allein nicht ausreicht.
ARIA und gesetzliche Anforderungen
In den Web Content Accessibility Guidelines (WCAG 2.2) wird der Einsatz von ARIA direkt oder indirekt in vielen Erfolgskriterien gefordert, z. B. für Rollen, Zustände und Bezeichnungen. Auch die EN 301 549 und die BITV setzen voraus, dass interaktive Inhalte durchgängig zugänglich sind – mit oder ohne ARIA.
