HTML Accessibility Validator
Gültiges HTML ist noch kein zugänglicher Name
Feld, Schaltfläche, Sprache, Titel, doppelte id: fünf Stellen im Dokument.
Ein Dokument, drei Linsen
Der Validator sieht Struktur, nicht die ganze Nutzung
Dieselben Zeilen erzeugen je Werkzeug andere, ergänzende Belege.
<!doctype html><html>lang fehlt<head><title></title>leer</head><body><span>Suchbegriff</span><input id="q" aria-describedby="hinweis">ohne Namen<button><svg aria-hidden="true">…</svg></button>ohne Namen<p id="hinweis">Preise</p>ID 1<p id="hinweis">Suche</p>ID 2</body>
title darf nicht leer sein.
Doppelte ID hinweis.
lang am html-Element ergänzen.
Suchfeld hat keinen zugänglichen Namen.
BefundSymbol-Schaltfläche hat keinen Namen.
BefundARIA-Verweis trifft keine eindeutige ID.
Beschreibt der Feldname die erwartete Eingabe?
UrteilBleibt die Suche mit Tastatur vollständig nutzbar?
UrteilIst die Rückmeldung nach dem Absenden verständlich?
Drei Fragen, drei Belegarten
Die Reihenfolge reduziert Fehlersuche, ohne eine Prüfung zur Gesamtbewertung zu erklären.
Fängt unbeabsichtigte Markup-Fehler vor der Browserkorrektur ab.
Liefert wiederholbare Fundstellen, aber keine vollständige Bewertung.
Prüft Kontext und Nutzung, die sich nicht allein aus Regeln ableiten lassen.
So wandert ein Befund bis zur Abnahme
<input id="q">label for="q"Beziehung im Code herstellenAus dem Prüfbericht
Fünf Regeln, fünf Befunde
Kritisch Gültiges Markup ohne Feldnamen Regel label
Der Validator akzeptiert ein input ohne label. Erst die Verbindung über for oder aria-labelledby gibt dem Feld einen Namen.
Kritisch Die Schaltfläche trägt nur ein Symbol Regel button-name
Ein button mit reinem Icon bleibt namenlos, auch wenn das HTML gültig ist. Ein aria-label nennt die Aktion.
Kritisch Die Sprachangabe fehlt am html-Element Regel html-has-lang
Der Validator rät zur Sprachangabe, der Hinweis geht leicht unter. Ein lang="de" gehört an das Wurzelelement.
Kritisch Ein leeres title-Element Regel document-title
Das Element ist vorhanden, aber ohne Text. Der Titel nennt Seite und Anbieter, damit der Tab im Wechsel erkennbar bleibt.
Prüfen Dieselbe id zweimal im Dokument Regel duplicate-id-aria
Hier melden beide Prüfungen: ungültiges HTML und ein aria-Verweis auf zwei Ziele. Eindeutige ids lösen beides.
Zum Mitnehmen
Das geprüfte Dokument, korrigiert
Drei Korrekturen aus HTML-Validator und Barriere-Scan.
Korrektur in 3 Schritten ansehen
Feld und Schaltfläche benennen
Aus dem span wird ein label mit for. Der Symbol-Button bekommt mit aria-label das Wort, das die Sprachausgabe nennt.
KorrekturvergleichSchritt 1 · HTML Vorher
<span>Suchbegriff</span> <input id="q" type="search" name="q"> <button type="submit"> <svg aria-hidden="true"><use href="#lupe"></use></svg> </button>Nachher
<label for="q">Suchbegriff</label> <input id="q" type="search" name="q"> <button type="submit" aria-label="Suche starten"> <svg aria-hidden="true"><use href="#lupe"></use></svg> </button>Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie mit Tab auf die Lupe. Ein Vorleseprogramm sagt „Suche starten, Schaltfläche“.
Sprache und Titel setzen
Beides meldet auch der HTML-Validator. Die Sprachangabe steuert die Aussprache, der Titel macht die Seite im Tab unterscheidbar.
KorrekturvergleichSchritt 2 · HTML Vorher
<html> <head> <title></title> </head>Nachher
<html lang="de"> <head> <title>Ersatzteile | Werkstatt Trave</title> </head>Markierte Zeilen wurden geändert
So prüfen Sie es Sehen Sie auf den Browser-Tab. Dort steht jetzt der Seitentitel.
Doppelte id eindeutig machen
Zwei gleiche ids machen den Verweis mehrdeutig. Eindeutige Werte und ein nachgezogenes aria-describedby verbinden Feld und passenden Hinweis.
KorrekturvergleichSchritt 3 · HTML Vorher
<p id="hinweis">Alle Preise inklusive Mehrwertsteuer.</p> <input id="q" type="search" aria-describedby="hinweis"> <p id="hinweis">Suche ab drei Zeichen.</p>Nachher
<p id="hinweis-preise">Alle Preise inklusive Mehrwertsteuer.</p> <input id="q" type="search" aria-describedby="hinweis-suche"> <p id="hinweis-suche">Suche ab drei Zeichen.</p>Markierte Zeilen wurden geändert
So prüfen Sie es Suchen Sie im Quelltext nach der id. Jeder Wert kommt nur einmal vor.