ARIA Checker
Der Checker prüft, was Sie nicht sehen
Fünf Elemente, ein Prüfbericht: Attributnamen, Werte, Rollen und Namen.
ARIA-Prüfspur
Vom Attribut bis zur Ansage
Markup wird erst im Accessibility Tree zu Rolle, Name und Zustand.
Konzeptdarstellung
Vier Spuren durch den ARIA Checker
- Markup im DOM
<button aria-labl="Karte öffnen">
<span aria-hidden="true">▦</span>
</button>Accessibility Treerole: buttonname: leerPrüfbericht2 Befundearia-valid-attrbutton-name - Markup im DOM
<button aria-expanded="offen">
Schichtnotiz
</button>Accessibility Treerole: buttonexpanded: ungültigPrüfberichtWert unbekanntaria-valid-attr-value - Markup im DOM
<a href="/karte"
aria-pressed="true">Karte</a>Accessibility Treerole: linkpressed: nicht unterstütztPrüfberichtAttribut passt nichtaria-allowed-attr - Markup im DOM
<div role="switch"
aria-checked="false" tabindex="0">
</div>Accessibility Treerole: switchname: leer · checked: falsePrüfberichtName fehltaria-toggle-field-name
Die blinde Stelle
Technisch grün, inhaltlich falsch
Eine gültige Rolle kann trotzdem falsches Verhalten ankündigen. ARIA ergänzt Semantik, aber keine Tastaturbedienung.
<a href="/bericht.csv" role="button">
Bericht laden</a>Die vollständige Prüfstrecke
- 1Automatisch prüfen
Findet ungültige Namen, Werte und Kombinationen.
- 2Browser-Ergebnis ansehen
Zeigt berechnete Rolle, Name und Zustand.
- 3Verhalten auslösen
Beweist Fokus, Tastenlogik und passende Ansage.
So prüfen Sie es
- Lassen Sie den ARIA Checker laufen und öffnen Sie den ersten Befund am Element.
- Öffnen Sie in Chrome DevTools Elements → Accessibility und aktivieren Sie Show accessibility tree.
- Vergleichen Sie dort den berechneten Namen, die Rolle und den Zustand mit der Oberfläche.
- Bedienen Sie das Element mit Tab, Enter, Leertaste und den im Muster erwarteten Pfeiltasten.
- Prüfen Sie die letzte Strecke mit einem Vorleseprogramm in Ihren Zielbrowsern.
Aus dem Prüfbericht
Fünf Prüfungen, fünf Befunde
Kritisch aria-labl ist kein Attribut Regel aria-valid-attr
Der Checker vergleicht jeden Attributnamen mit der ARIA-Liste. Ein Tippfehler kostet den Namen.
Kritisch aria-expanded="offen" ist kein Wert Regel aria-valid-attr-value
Jeder Wert wird gegen die erlaubten geprüft. Nur true und false bestehen.
Kritisch aria-pressed an einem Link Regel aria-allowed-attr
Ein Link kennt keinen Druckzustand. Das Attribut passt nur an eine Schaltfläche.
Kritisch Die Schaltfläche hat keinen Namen Regel button-name
Ein Symbol ohne Wort. Der Checker meldet jede Schaltfläche, deren Name leer bleibt.
Kritisch Der Schalter hat keinen Namen Regel aria-toggle-field-name
role="switch" ohne Namen sagt nur „Schalter“. aria-labelledby verbindet ihn mit seinem Text.
Zum Mitnehmen
Der Prüfbericht, abgearbeitet
Fünf Zeilen, fünf Korrekturen. Der Checker bestätigt jede einzeln.
Korrektur in 2 Schritten ansehen
Attributname und Wert korrigieren
aria-label richtig geschrieben liefert den Namen. aria-expanded trägt false, nicht „offen“.
KorrekturvergleichSchritt 1 · HTML Vorher
<button type="button" aria-labl="Wetterkarte öffnen"> <span aria-hidden="true">▦</span> </button> <button type="button" aria-expanded="offen">Schichtnotiz öffnen</button>Nachher
<button type="button" aria-label="Wetterkarte öffnen"> <span aria-hidden="true">▦</span> </button> <button type="button" aria-expanded="false">Schichtnotiz öffnen</button>Markierte Zeilen wurden geändert
So prüfen Sie es Lassen Sie den Checker erneut laufen. Beide Zeilen sind aus dem Bericht verschwunden.
Zustände an die passenden Elemente
Ein Link trägt kein aria-pressed. Ein Schalter braucht einen Namen, sein Text daneben liefert ihn.
KorrekturvergleichSchritt 2 · HTML Vorher
<a href="/karte" aria-pressed="true">Kartenansicht</a> <div role="switch" tabindex="0" aria-checked="false"></div> <span id="dock">Dockmarkierung</span>Nachher
<button type="button" aria-pressed="true">Kartenansicht</button> <div role="switch" tabindex="0" aria-checked="false" aria-labelledby="dock"></div> <span id="dock">Dockmarkierung</span>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm sagt „Kartenansicht, Umschaltfläche, gedrückt“ und „Dockmarkierung, Schalter, aus“.