ARIA Roles im HTML
Erst das richtige Element, dann eine Rolle
Rolle, Zustand, Kontrollkästchen, Auswahlliste: vier Stellen an einem selbst gebauten Filter.
Semantik-Röntgen
Was eine Rolle sagt – und was sie nicht baut
Zwei gleich aussehende Schalter können technisch völlig verschieden sein. Der Browser liefert nur beim nativen Element das erwartete Verhalten mit.
<button>
- Semantik
button- Tab-Fokus
- eingebaut
- Enter + Leertaste
- eingebaut
disabled- Verhalten + Zustand
Der Browser liefert. Rolle und Bedienung bleiben gekoppelt.
<div role="button">
- Semantik
button- Tab-Fokus
- selbst ergänzen
- Enter + Leertaste
- selbst programmieren
aria-disabled- stoppt keinen Klick
Die Rolle ist ein Versprechen. Das Verhalten schuldet der Code.
Die kurze Route vom Element zur Bedeutung
Lesen Sie jede Spur von links nach rechts: HTML, implizite Rolle, mitgelieferte Fähigkeit.
<button type="button">buttonTab, Enter, Leertaste<input type="checkbox">checkboxZustand, Label, Formularwert<a href="/preise">linkVerlauf, neuer Tab, Kontextmenü<nav aria-label="Hauptnavigation">navigationZiel in der Bereichsliste<ul> + <li>list + listitemStruktur und EinträgeARIA ergänzt, wenn HTML keine Aussage hat
<button>+aria-pressed=Rolle button · Zustand gedrückt
Das native Element bleibt die Basis. ARIA ergänzt den Umschaltzustand; das Skript hält seinen Wert synchron.
Vier native Ausgangspunkte
Die Rollen stehen nicht im HTML. Der Browser leitet sie aus den Elementen ab.
<button type="button">Mehr anzeigen</button>
<label>
<input type="checkbox" name="filter">
Nur verfügbare Artikel
</label>
<a href="/preise">Preise ansehen</a>
<nav aria-label="Hauptnavigation">
<a href="/produkte">Produkte</a>
<a href="/kontakt">Kontakt</a>
</nav>So prüfen Sie Rollen
- Im HTML nach
role=suchen und zuerst ein natives Element prüfen. - Mit Tab jedes Widget erreichen; der Fokus muss sichtbar bleiben.
- Die erwarteten Tasten aus dem Rollen-Pattern vollständig testen.
- Im Accessibility Tree Name, Rolle und aktuellen Zustand vergleichen.
Aus dem Prüfbericht
Vier Stellen, vier Befunde
Kritisch Eine Rolle, die es nicht gibt Regel aria-roles
role="filterfeld" steht in keiner Liste und wird verworfen. Das Element bleibt ein namenloses div.
Kritisch Ein Zustand, den die Rolle nicht erlaubt Regel aria-allowed-attr
aria-checked an role="img" widerspricht sich. Entweder ist es ein Bild oder eine Auswahl, nicht beides.
Kritisch Das Kontrollkästchen ohne Zustand Regel aria-required-attr
role="checkbox" verlangt aria-checked. Ohne den Wert bleibt offen, ob der Filter gesetzt ist.
Kritisch Die Auswahlliste ohne Optionen Regel aria-required-children
role="listbox" verlangt Kinder mit role="option". Ohne sie meldet sich eine leere Liste.
Zum Mitnehmen
Der Filter, korrigiert
Natives Element zuerst, sonst Rolle samt geforderten Pflichten.
Korrektur in 3 Schritten ansehen
Das native Element statt einer Rolle
Ein input mit type="checkbox" bringt Rolle, Zustand und Tastaturbedienung mit. Ein ARIA-Attribut ist dann nicht nötig.
KorrekturvergleichSchritt 1 · HTML Vorher
<div role="filterfeld" tabindex="0">Grenzmarke</div>Nachher
<label> <input type="checkbox" name="filter" value="grenzmarke"> Grenzmarke </label>Markierte Zeilen wurden geändert
So prüfen Sie es Tabben Sie zum Filter und drücken Sie die Leertaste. Das Häkchen wechselt.
Bei eigener Rolle den Zustand ergänzen
Wo role="checkbox" bleiben muss, gehört aria-checked dazu. Das Skript hält den Wert beim Umschalten aktuell.
KorrekturvergleichSchritt 2 · HTML Vorher
<div role="checkbox" tabindex="0">Grenzmarke</div>Nachher
<div role="checkbox" tabindex="0" aria-checked="false">Grenzmarke</div>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm nennt beim Filter „Kontrollkästchen“ und den Zustand.
Der Liste ihre Optionen geben
role="listbox" verlangt Kinder mit role="option". Sonst meldet sich die Auswahl leer, obwohl Einträge sichtbar sind.
KorrekturvergleichSchritt 3 · HTML Vorher
<div role="listbox" aria-label="Sortierung"> <div>Nach Datum</div> </div>Nachher
<div role="listbox" aria-label="Sortierung"> <div role="option" aria-selected="false">Nach Datum</div> </div>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm nennt beim Öffnen die Zahl der Optionen.