HTML Validator Accessibility
Gültiges HTML reicht dem Formular nicht
Feldname, zweites label, doppelte id: drei Stellen im Formular.
Drei Prüflinsen · ein Feld
Grammatik ist erst der Anfang
Derselbe Formularausschnitt liefert drei verschiedene Befunde. Folgen Sie dem Code vom Validator über den Accessibility-Baum bis zur echten Aufgabe.
<span>Dauer</span>
<input id="dauer" type="number"
aria-describedby="dauer">
<p id="dauer">Angabe in Stunden</p>- 01
Quelltext
HTML-Validator
Sicherer Befund„dauer“ ist keine eindeutige id.Er vergleicht das Dokument mit den HTML-Regeln und findet die formale Kollision. Dass „Dauer“ nur danebensteht, ist weiterhin gültiges Markup.
Nächster Standid="dauer-hinweis" · aria-describedby="dauer-hinweis" - 02
Browserbaum
Accessibility-Prüfer
- Rolle
- spinbutton
- Name
- leer
- Hinweis
- Angabe in Stunden
Der Prüfer erkennt den fehlenden zugänglichen Namen. Ein benachbartes
spanwird nicht automatisch zur Beschriftung des Feldes.Nächster Stand<label for="dauer">Dauer</label> - 03
Aufgabe
Handprüfung
Dauer?Leihdauer?Vertragsdauer?Der Name ist nun technisch vorhanden. Erst eine Person kann im Ablauf beurteilen, ob „Dauer“ eindeutig sagt, welche Angabe verlangt wird.
Verständlicher NameMietdauer
Korrigierter Bauplan
Drei Verbindungen, die etwas anderes leisten
Die eindeutige id ist der Anker. for liefert den Namen; aria-describedby hängt die zusätzliche Eingabehilfe an. Die verständliche Wortwahl bleibt eine redaktionelle Entscheidung.
<label for="dauer">Mietdauer</label>
<input id="dauer" type="number" min="1" max="24"
aria-describedby="dauer-hinweis">
<p id="dauer-hinweis">Stunden, höchstens 24</p>Aus dem Prüfbericht
Drei Regeln, drei Befunde
Kritisch Ein gültiges Feld ohne Namen Regel label
Der Validator meldet nichts, der Accessibility-Baum zeigt einen leeren Namen. Ein label mit for schließt die Lücke.
Prüfen Zwei Beschriftungen an einem Feld Regel form-field-multiple-labels
Manche Ausgaben lesen nur die erste vor. Ein label bleibt der Name, die Einheit wird über aria-describedby zum Hinweis.
Prüfen Doppelte id im Formular Regel duplicate-id-aria
Hier melden beide Prüfungen: ungültiges HTML und ein mehrdeutiger aria-Verweis. Eindeutige ids beheben beides auf einmal.
Zum Mitnehmen
Das Formular, korrigiert
Ein Name, ein Hinweis, eindeutige ids.
Korrektur in 3 Schritten ansehen
Beschriftung mit dem Feld verbinden
Das for zeigt auf die id des Feldes. Das Aussehen bleibt, der Accessibility-Baum zeigt danach den Namen „Mietdauer“.
KorrekturvergleichSchritt 1 · HTML Vorher
<span class="feldname">Mietdauer</span> <input id="dauer" type="number" min="1" max="24">Nachher
<label class="feldname" for="dauer">Mietdauer</label> <input id="dauer" type="number" min="1" max="24">Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf „Mietdauer“. Springt der Cursor ins Feld, ist die Verbindung da.
Das zweite label zum Hinweis machen
Ein Feld trägt einen Namen. Der Einheitenhinweis bleibt sichtbar und wird als Beschreibung verbunden, statt als zweites label zu konkurrieren.
KorrekturvergleichSchritt 2 · HTML Vorher
<label for="dauer">Mietdauer</label> <input id="dauer" type="number" min="1" max="24"> <label for="dauer">Angabe in Stunden</label>Nachher
<label for="dauer">Mietdauer</label> <input id="dauer" type="number" min="1" max="24" aria-describedby="dauer-hinweis"> <span id="dauer-hinweis">Angabe in Stunden</span>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm sagt „Mietdauer“ und danach „Angabe in Stunden“.
Doppelte id auflösen
Zwei gleiche ids machen den Verweis mehrdeutig. Eindeutige Werte und ein nachgezogenes aria-describedby verbinden Feld und Hinweis wieder.
KorrekturvergleichSchritt 3 · HTML Vorher
<p id="hinweis">Angabe in Stunden</p> <input id="dauer" aria-describedby="hinweis"> <p id="hinweis">Höchstens 24 Stunden</p>Nachher
<p id="hinweis-einheit">Angabe in Stunden</p> <input id="dauer" aria-describedby="hinweis-einheit"> <p id="hinweis-grenze">Höchstens 24 Stunden</p>Markierte Zeilen wurden geändert
So prüfen Sie es Suchen Sie die id im Quelltext. Sie kommt genau einmal vor.