Informationen für Hilfsmittel ergänzen
ARIA steht für Accessible Rich Internet Applications. Mit ARIA-Attributen beschreibst du im HTML zusätzliche Informationen über ein Element. Ein Screenreader kann dadurch beispielsweise erkennen, dass ein Button einen Bereich aufklappt und ob dieser Bereich gerade geöffnet ist.
Die WAI-ARIA-Übersicht des W3C erklärt, wie diese Angaben Hilfsmittel unterstützen. Du kannst Rollen, Zustände und Eigenschaften ergänzen:
| Angabe | Bedeutung | Beispiel |
|---|---|---|
| Rolle | Art oder Funktion des Elements | role="dialog" bezeichnet einen Dialog |
| Zustand | Aktueller Zustand des Elements | aria-expanded="false" meldet einen zugeklappten Bereich |
| Eigenschaft | Ergänzende Information oder Beziehung | aria-labelledby="delivery-heading" verweist auf den Text für den zugänglichen Namen |
Solche Angaben müssen zur sichtbaren Oberfläche und zur Bedienung passen. Ein aufgeklappter Bereich mit aria-expanded="false" liefert widersprüchliche Informationen.
Passendes HTML zuerst verwenden
Für eine Schaltfläche verwendest du möglichst <button>, für einen Link <a href="…"> und für ein Eingabefeld das passende Formularelement. Diese Elemente bringen ihre Bedeutung und übliche Tastaturfunktionen bereits mit.
Ein <div role="button"> erhält durch ARIA eine Button-Rolle. Damit es bedienbar wird, musst du zusätzlich Fokus und Tastaturaktionen programmieren. Die ARIA-Grundregeln des W3C erklären diesen Zusammenhang. role="button" ergänzt weder einen Tabstopp noch die Reaktion auf Enter und Leertaste.
Auch Rollennamen müssen stimmen. role="buton" ist zum Beispiel ungültig. Ein Browser behandelt ein Element mit ausschließlich unbekannten Rollen so, als hätte es keine ausdrückliche ARIA-Rolle. Prüfe bei einem solchen Befund zuerst, ob ein natives HTML-Element die Aufgabe erfüllt. Abschnitt 9.1 der ARIA-Spezifikation beschreibt das Browserverhalten.
Einen Aufklappzustand beschreiben
Dieses Beispiel zeigt das HTML eines zunächst geschlossenen Bereichs:
<button type="button"
aria-expanded="false"
aria-controls="delivery-options">
Lieferoptionen
</button>
<div id="delivery-options" hidden>
Du kannst zwischen Abholung und Versand wählen.
</div>
Der Button heißt durch seinen sichtbaren Text „Lieferoptionen“. aria-controls nennt die ID des zugehörigen Bereichs; aria-expanded beschreibt den Zustand. Beim Öffnen muss dein JavaScript das hidden-Attribut entfernen und aria-expanded auf true setzen. Beim Schließen setzt es beide Angaben zurück. Der gezeigte HTML-Ausschnitt enthält diese Funktion noch nicht. Das W3C-Muster für aufklappbare Bereiche beschreibt das Zusammenspiel.
Namen und Verweise richtig zuordnen
Mit aria-labelledby verweist du auf ein oder mehrere Elemente, deren Text den zugänglichen Namen liefert. Ein Beispiel ist ein Abschnitt, den seine Überschrift benennt:
<section aria-labelledby="delivery-heading">
<h2 id="delivery-heading">Lieferung</h2>
<p>Wir versenden innerhalb Deutschlands.</p>
</section>
Schreibweisen müssen übereinstimmen: delivery-heading und delivery-title sind verschiedene IDs. Ein Verweis auf ein fehlendes Element liefert dessen Text nicht als Namen. Wenn du mehrere IDs angibst, prüfe jede davon. Ein teilweise funktionierender Verweis kann trotzdem einen unvollständigen Namen erzeugen.
Jede ID muss im Dokument eindeutig sein. Kommt eine referenzierte ID doppelt vor, kann der Browser den Text des falschen Elements zuordnen. Das betrifft neben aria-labelledby auch Beschreibungen über aria-describedby und die Zuordnung von Formularbeschriftungen mit for. Abschnitt 8.6.1 der ARIA-Spezifikation erläutert den Umgang mit fehlenden und mehrfach vergebenen IDs.
Auch eine Grafikrolle braucht einen Namen. Bei einer informativen SVG-Grafik mit role="img" kann etwa aria-labelledby auf ein passendes <title> im SVG verweisen. Bei einem normalen <img> verwendest du den Alt-Text. Die W3C-Hinweise zu zugänglichen Namen erklären die Benennung nach Element und Rolle.
Mit aria-hidden ausgeblendete Inhalte
aria-hidden="true" blendet ein Element samt Nachkommen für Hilfsmittel aus. Es versteckt den Inhalt nicht sichtbar und entfernt auch keine Tabstopps. Ein damit ausgeblendeter Link kann deshalb weiterhin per Tastatur erreichbar sein, obwohl er für Hilfsmittel verborgen sein soll.
Verwende aria-hidden="true" nicht auf bedienbaren Elementen oder auf Bereichen mit weiterhin erreichbaren Bedienelementen. Das gilt auch für einen übergeordneten Container. Ein aria-hidden="false" am Kind hebt die Ausblendung durch einen Vorfahren nicht auf. Die W3C-Prüfregel zu aria-hidden und Tastaturfokus zeigt passende und fehlerhafte Beispiele.
Automatisierte Befunde einordnen
ClariSEO kann ausgewählte ARIA-Probleme erkennen, etwa ungültige Rollen, fehlende Verweisziele oder mehrfach vergebene referenzierte IDs. Die Quelltextprüfung erfasst dabei nur bestimmte Fälle. Inhalte, die JavaScript später ergänzt, und Zustandswechsel müssen im Browser geprüft werden.
Ein unauffälliger Report belegt deshalb keine korrekte ARIA-Umsetzung. Prüfe nach einer Korrektur den zugänglichen Namen, die Tastaturbedienung und die Ausgabe mit einem Screenreader, während du das Element öffnest, schließt oder umschaltest.