A11y Validator
Was ein Validator findet, und was nicht
Vier Befunde aus einem Prüflauf, jeder mit Fundstelle und Korrektur.
Prüfgrenzen erkennen
Ein Validator prüft Regeln. Sie prüfen die Erfahrung.
Dieselbe Seite liefert je nach Zustand und Prüfweg andere Belege.
alt oder labelGeprüft wird der aktuelle Zustand
HTML-Validator
Prüft, ob das Markup den Regeln der Sprache folgt. Das schafft eine saubere Grundlage.
Grenze: Gültiges HTML beweist keine Bedienbarkeit.
A11y-Validator
Prüft entscheidbare Regeln im gerenderten DOM und Accessibility Tree.
Grenze: Nicht erreichte Zustände bleiben ungeprüft.
Handprüfung
Folgt einer echten Aufgabe mit Tastatur, Zoom und Hilfstechnik.
Grenze: Der Prüfumfang muss dokumentiert werden.
Ein belastbarer Durchlauf
So prüfen Sie es
- Ausgangszustand scannenSpeichern Sie pro Befund Regel, Fundstelle und sichtbaren Zustand.
- Zustände öffnenÖffnen Sie Menü und Dialog. Lösen Sie Formularfehler aus. Scannen Sie erneut.
- Aufgabe von Hand abschließenNutzen Sie Tab und Umschalt + Tab. Prüfen Sie Fokus, Reihenfolge und Rückmeldung.
- Korrektur gegenprüfenWiederholen Sie denselben Zustand und dieselbe Aufgabe nach der Änderung.
Aus dem Prüfbericht
Vier Befunde aus einem Lauf
Kritisch Feld ohne Namen Regel label
Der Validator meldet jedes Feld, dem kein label, aria-label oder aria-labelledby zugeordnet ist.
Kritisch Link ohne Text Regel link-name
Ein Link mit Bild ohne alt oder nur einem Symbol hat keinen Namen. Der Validator zählt jeden davon.
Kritisch Bild ohne Alternativtext Regel image-alt
Ein fehlendes alt-Attribut findet der Validator sicher. Ob der Text passt, sieht nur ein Mensch.
Kritisch Ungültiger ARIA-Wert Regel aria-valid-attr-value
aria-expanded="ja" ist kein erlaubter Wert. Der Validator prüft jeden Wert gegen die ARIA-Liste.
Zum Mitnehmen
Zwei Befunde, korrigiert
Der Validator zeigt die Stelle. Die Korrektur ist eine Zeile.
Korrektur in 2 Schritten ansehen
Dem Bild einen Alternativtext geben
Ein Bild ohne alt liest ein Vorleseprogramm als Dateinamen vor. Der Text nennt, was das Bild zeigt.
KorrekturvergleichSchritt 1 · HTML Vorher
<img src="team-2026.jpg">Nachher
<img src="team-2026.jpg" alt="Das Team vor dem Firmengebäude">Markierte Zeilen wurden geändert
So prüfen Sie es Deaktivieren Sie Bilder im Browser. An der Stelle des Bildes steht jetzt der Text.
Den ARIA-Wert korrigieren
aria-expanded kennt nur true und false. Jeder andere Wert wird ignoriert.
KorrekturvergleichSchritt 2 · HTML Vorher
<button type="button" aria-expanded="ja">Filter</button>Nachher
<button type="button" aria-expanded="true">Filter</button>Markierte Zeilen wurden geändert
So prüfen Sie es Tab auf die Schaltfläche. Ein Vorleseprogramm sagt jetzt „Filter, Schaltfläche, erweitert“.