ARIA im HTML
ARIA ergänzt, was das HTML nicht sagt
Rolle, Attributname, Zustand, Name: vier Stellen an einem selbst gebauten Bedienelement.
Hör-Test
So klingt ein selbst gebauter Aufklapper
Dasselbe Bedienelement, zweimal angesagt.
Ein div mit erfundener Rolle. Kein Bedienelement, kein Zustand, nur der Text.
Ein button mit gültigem aria-expanded. Rolle, Name und Zustand kommen mit.
Aus dem Prüfbericht
Vier Stellen, vier Befunde
Kritisch Eine Rolle, die es nicht gibt Regel aria-roles
role="aufklapper" steht in keiner ARIA-Liste und wird verworfen. Ein button bringt die Rolle ohne Attribut mit.
Kritisch Ein Buchstabe fehlt im Attributnamen Regel aria-valid-attr
aria-expandd wird stillschweigend übergangen. Der Zustand erscheint nirgends, obwohl er im Quelltext steht.
Kritisch Ein Zustand, den die Rolle nicht kennt Regel aria-allowed-attr
aria-checked an einem Element mit role="img" widerspricht sich. Entweder passt die Rolle nicht oder das Attribut.
Kritisch Die Schaltfläche zeigt nur ein Symbol Regel button-name
Ein Chevron ohne Wort bleibt namenlos. Ein sichtbarer Text neben dem Symbol nennt die Aktion.
Zum Mitnehmen
Das Bedienelement, korrigiert
Erst das richtige Element, dann nur passende ARIA-Attribute.
Korrektur in 3 Schritten ansehen
Statt einer Rolle das richtige Element
Ein button bringt Rolle, Fokus und Tastaturbedienung mit. Eine erfundene Rolle an einem div bringt nichts davon.
KorrekturvergleichSchritt 1 · HTML Vorher
<div role="aufklapper" aria-expandd="false"> Mehr anzeigen </div>Nachher
<button type="button" aria-expanded="false" aria-controls="details"> Mehr anzeigen </button>Markierte Zeilen wurden geändert
So prüfen Sie es Drücken Sie die Tabulatortaste. Das Element bekommt Fokus und reagiert auf Leertaste und Eingabetaste.
Nur Attribute setzen, die die Rolle erlaubt
aria-checked gehört zu Auswahlelementen, nicht zu einem Bild. Bei role="img" bleiben Name und Beschreibung.
KorrekturvergleichSchritt 2 · HTML Vorher
<div role="img" aria-label="Skizze am Bach" aria-checked="true"> Bachskizze </div>Nachher
<div role="img" aria-label="Skizze am Bach"> Bachskizze </div>Markierte Zeilen wurden geändert
So prüfen Sie es Lesen Sie jedes aria-Attribut zusammen mit der Rolle daneben. Widersprüche fallen dabei auf.
Der Schaltfläche einen Namen geben
Das Symbol bleibt für Vorleseprogramme verborgen. Ein sichtbares Wort daneben nennt die Aktion für alle.
KorrekturvergleichSchritt 3 · HTML Vorher
<button type="button"> <svg aria-hidden="true"><use href="#chevron"></use></svg> </button>Nachher
<button type="button"> Mehr anzeigen <svg aria-hidden="true"><use href="#chevron"></use></svg> </button>Markierte Zeilen wurden geändert
So prüfen Sie es Fahren Sie mit der Tab-Taste auf die Schaltfläche. Ein Vorleseprogramm nennt jetzt ein Wort.