HTML Accessibility Checker
Was ein Blick in den HTML-Ausschnitt zeigt
Feld, Bild, doppelte id, zweites label: vier Stellen im Markup.
Lokaler Prüfplatz
Ein Ausschnitt, drei Blickwinkel
Quelltext, gerenderte Seite und wiederholbarer Lauf finden unterschiedliche Teile desselben Problems.
<label for="mail">E-Mail</label><input id="mail" type="email"><img src="team.jpg">1<p id="hinweis">Pflichtfeld</p><p id="hinweis">Antwort in 2 Tagen</p>2<input id="ort" type="text">3- 1Bild ohne
altDie Textalternative fehlt. - 2
iddoppeltDer Verweis ist nicht eindeutig. - 3Feld ohne verbundenen NamenSichtbarer Text allein reicht nicht.
Die drei Linsen liegen an verschiedenen Stellen
Markiert statische Muster direkt in HTML, JSX, Angular oder Vue.
code --install-extension
deque-systems.vscode-axe-linterSieht den aktuellen Browserzustand nach CSS und JavaScript.
Erweiterungs-Store
„WAVE Evaluation Tool“Prüft eine lokale Datei oder URL und liefert einen Exit-Code.
npm install -g pa11y
pa11y /absoluter/pfad/pruefen.htmlWelche Linse sieht welchen Zustand?
Ein grüner Lauf bedeutet nur: Die ausgeführten Regeln fanden keinen Verstoß. Er ersetzt keine Beurteilung durch Menschen.
Für eine Datei brauchen Sie keinen lokalen Server
Pa11y akzeptiert laut Projektdokumentation einen absoluten Pfad zu einer HTML-Datei. Ein Server wird erst nötig, wenn Ihre Seite Routing, APIs oder andere Laufzeitabhängigkeiten benötigt.
So prüfen Sie es
- Öffnen Sie den Ausschnitt im Editor. Korrigieren Sie fehlende Attribute, ungültige Werte und eindeutige Verweise dort, wo sie entstehen.
- Öffnen Sie dieselbe Datei im Browser. Prüfen Sie den gerenderten DOM, Kontrast, Fokus und Zustände nach JavaScript.
- Wiederholen Sie den Lauf in der Kommandozeile. Halten Sie Datei, Runner und Ausgabe fest, damit der Befund reproduzierbar bleibt.
- Bewerten Sie danach Inhalt und Bedienweg: Alt-Texte, Tastaturreihenfolge, Fehlermeldungen und Verständlichkeit brauchen Kontext.
Aus dem Prüfbericht
Vier Regeln, vier Befunde
Kritisch Das Eingabefeld hat keinen Namen Regel label
Text daneben ist keine Verbindung. Ein label mit for oder ein aria-labelledby macht ihn im Ausschnitt zum Namen des Feldes.
Kritisch Ein img ohne alt-Attribut Regel image-alt
Fehlt alt, kann die Ausgabe den Dateinamen oder die URL vorlesen. Jedes img im Ausschnitt braucht ein alt, dekorative Bilder ein leeres.
Prüfen Dieselbe id an zwei Elementen Regel duplicate-id-aria
Ein aria-describedby trifft dann zwei Ziele und die Ausgabe wird unsicher. Vergeben Sie eindeutige ids und ziehen Sie die Verweise nach.
Prüfen Zwei label an einem Feld Regel form-field-multiple-labels
Manche Ausgaben lesen nur eines der beiden vor. Ein label bleibt der Name, der Zusatz wird ein Hinweis über aria-describedby.
Zum Mitnehmen
Der Ausschnitt, korrigiert
Ein Name je Feld, ein alt je Bild, eine id je Element.
Korrektur in 3 Schritten ansehen
Feld und Bild benennen
Das span wird zum label mit for. Das Bild bekommt einen alt-Text, der seinen Beitrag zum Inhalt nennt.
KorrekturvergleichSchritt 1 · HTML Vorher
<span>E-Mail-Adresse</span> <input id="mail" type="email"> <img src="werkstatt.jpg">Nachher
<label for="mail">E-Mail-Adresse</label> <input id="mail" type="email"> <img src="werkstatt.jpg" alt="Vier Mitarbeitende in der Werkstatt">Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf „E-Mail-Adresse“. Springt der Cursor ins Feld, ist der Name verbunden.
Doppelte id auflösen
Jede id kommt genau einmal vor. Der Verweis in aria-describedby zeigt danach eindeutig auf den Hinweis, der gemeint ist.
KorrekturvergleichSchritt 2 · HTML Vorher
<p id="hinweis">Wir antworten innerhalb von zwei Tagen.</p> <input id="mail" type="email" aria-describedby="hinweis"> <p id="hinweis">Pflichtfeld.</p>Nachher
<p id="hinweis-antwort">Wir antworten innerhalb von zwei Tagen.</p> <input id="mail" type="email" aria-describedby="hinweis-antwort"> <p id="hinweis-pflicht">Pflichtfeld.</p>Markierte Zeilen wurden geändert
So prüfen Sie es Suchen Sie den id-Wert im Quelltext. Er darf nur ein einziges Mal auftauchen.
Das zweite label zum Hinweis machen
Das Feld behält einen Namen. Der Einheitenhinweis bleibt sichtbar und wird über aria-describedby als Beschreibung verbunden.
KorrekturvergleichSchritt 3 · HTML Vorher
<label for="stunden">Mietdauer</label> <input id="stunden" type="number" min="1" max="24"> <label for="stunden">Angabe in Stunden</label>Nachher
<label for="stunden">Mietdauer</label> <input id="stunden" type="number" min="1" max="24" aria-describedby="stunden-hinweis"> <span id="stunden-hinweis">Angabe in Stunden</span>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm sagt „Mietdauer“ und danach „Angabe in Stunden“.