ARIA Validator
Fünf Fragen an jedes ARIA-Attribut
Rolle, Attributname, Wert, Kombination, Verweisziel: fünf Stellen im Quelltext.
ARIA-Prüfstand
Ein Validator prüft den Vertrag, nicht das Verhalten.
Rolle, Attribut, Wert und Verweis sind maschinenlesbar. Die Bedienung müssen Sie erproben.
Eingabe
<div
role="switch"
aria-checked="maybe"
aria-labelledby="alarm-name">
Alarm
</div>Ein Element, fünf Fragen.
- 01Rolle
switchist definiert.bestanden - 02Attribut
aria-checkedgehört zur Rolle.bestanden - 03Wert
maybeist kein erlaubter Zustand.Fehler - 04Verweis
#alarm-namefehlt im Dokument.Fehler - 05VerhaltenÄndert sich der Zustand beim Bedienen?manuell
Ausgabe
aria-checked="false"id="alarm-name"ergänzen
Danach ist das Markup formal plausibel. Ob der Schalter klickbar, fokussierbar und synchron ist, bleibt offen.
Fehleratlas
Fünf Befunde, fünf verschiedene Reparaturen
Die Rolle bestimmt, welche Attribute und Werte an dieser Stelle Sinn ergeben.
- AWert
aria-expanded="maybe"Korrekturaria-expanded="false" - BName
aria-labl="Menü"Korrekturaria-label="Menü" - CKombination
role="img" aria-checked="true"Korrekturaria-checkedentfernen - DPflichtzustand
role="switch"Korrekturaria-checked="false"ergänzen - EVerweisziel
id="hinweis"zweimalKorrekturjedeideindeutig vergeben
Drei Linsen ergeben einen belastbaren Befund
Ein grüner Validatorbericht deckt nur die erste Linse ab. Prüfen Sie danach im Accessibility Tree des Browsers, was tatsächlich ausgegeben wird. Bedienen Sie das Element abschließend nur mit Tastatur und beobachten Sie jeden Zustandswechsel.
Prüfmethode
So verfolgen Sie einen Befund bis zum Verhalten
- Nu HTML CheckerPrüfen Sie URL oder Quelltext. Bearbeiten Sie die erste konkrete ARIA-Meldung.
- Element zurückverfolgenÖffnen Sie die gemeldete Zeile und prüfen Sie Rolle, erlaubte Attribute und ids.
- Browser prüfenLesen Sie im Accessibility Tree Name, Rolle, Zustand und Beziehungen aus.
- Zustand auslösenBedienen Sie das Element per Tastatur. Der ARIA-Zustand muss sichtbar mitlaufen.
Primärquellen für den Abgleich
Aus dem Prüfbericht
Fünf Regeln, fünf Befunde
Kritisch aria-expanded steht auf „maybe“ Regel aria-valid-attr-value
Der Validator kennt hier nur true und false. Ein geschlossener Aufklappbereich beginnt mit aria-expanded="false".
Kritisch aria-labl ist kein ARIA-Attribut Regel aria-valid-attr
Ein Tippfehler im Attributnamen liefert keinen Namen. Der Validator markiert ihn; richtig heißt es aria-label.
Kritisch Eine erfundene Rolle im role-Attribut Regel aria-roles
role="bruchstueck" steht in keiner ARIA-Liste. Entfernen Sie die Rolle oder setzen Sie eine standardisierte ein.
Kritisch aria-checked an einem Bild Regel aria-allowed-attr
Die Rolle img kennt keinen Auswahlzustand. Der Validator meldet die Kombination; das Attribut entfällt ersatzlos.
Prüfen Zwei Absätze mit derselben id Regel duplicate-id-aria
aria-describedby trifft auf zwei Ziele. Vergeben Sie eindeutige ids und führen Sie den Verweis nach.
Zum Mitnehmen
Die ARIA-Fehler, korrigiert
Vier Stellen im Quelltext, vier Befunde weniger.
Korrektur in 3 Schritten ansehen
Ungültige Werte auf true oder false
aria-expanded beschreibt einen Aufklappzustand. Der geschlossene Bereich beginnt mit false; die Klickfunktion setzt danach true und wieder false.
KorrekturvergleichSchritt 1 · ARIA Vorher
<button id="drawer-toggle" type="button" aria-controls="drawer-content" aria-expanded="maybe"> Schichtnotiz öffnen </button>Nachher
<button id="drawer-toggle" type="button" aria-controls="drawer-content" aria-expanded="false"> Schichtnotiz öffnen </button>Markierte Zeilen wurden geändert
So prüfen Sie es Klappen Sie den Bereich auf und zu. Ein Vorleseprogramm sagt „erweitert“ und „reduziert“.
Attributnamen und Rollen berichtigen
Ein falsch geschriebenes Attribut und eine erfundene Rolle werden verworfen. Die richtige Schreibweise macht aus dem Text wieder einen Namen.
KorrekturvergleichSchritt 2 · ARIA Vorher
<button type="button" aria-labl="Wetterkarte öffnen"></button> <div role="bruchstueck">Nicht erkannte Grammatikrolle</div>Nachher
<button type="button" aria-label="Wetterkarte öffnen"></button> <div>Nicht erkannte Grammatikrolle</div>Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie mit der Tab-Taste auf die Schaltfläche. Sie heißt jetzt „Wetterkarte öffnen“.
Doppelte id eindeutig vergeben
aria-describedby verweist auf genau eine id. Zwei gleiche Bezeichner machen die Beschreibung mehrdeutig; getrennte Namen lösen den Verweis auf.
KorrekturvergleichSchritt 3 · HTML Vorher
<article aria-describedby="fiction-source"> <p id="fiction-source">Werkstattregel zur Karte.</p> <p id="fiction-source">Hinweis zur Kalibrierung.</p> </article>Nachher
<article aria-describedby="fiction-source-text"> <p id="fiction-source-text">Werkstattregel zur Karte.</p> <p id="fiction-calibration">Hinweis zur Kalibrierung.</p> </article>Markierte Zeilen wurden geändert
So prüfen Sie es Suchen Sie im Quelltext nach der id. Sie kommt genau einmal vor.