HTML-Validator
Die Meldungen an ihrer Ursache beheben
Doppelte id, fehlendes lang, leerer Titel, Feld ohne Beschriftung.
Prüfakte · kontakt.html
Vom Validator-Hinweis zur belegten Korrektur
Ein Prüflauf ist erst verwertbar, wenn Meldung, Fundstelle, Ursache und erneuter Lauf zusammengehören. Dieses Beispiel verfolgt eine doppelte ID durch die gesamte Kette.
Die Spur durch das Dokument
liefert Quellzeilen zur Meldung.
Duplicate ID “hinweis”.
Erstes Vorkommen:
Zeile 10, Spalten 5–24
10 <label id="hinweis">E-Mail</label>
11 <input aria-describedby="hinweis">
12 <p id="hinweis">Pflichtfeld</p>Diagnose: Nicht die zweite Zeile allein korrigieren. In der gemeinsamen Vorlage nach allen Vorkommen von id="hinweis" und ihren Verweisen suchen.
10 <label for="email">E-Mail</label>
11 <input id="email" name="email" aria-describedby="email-hinweis">
12 <p id="email-hinweis">Pflichtfeld</p>Der reproduzierbare Lauf
Vier Entscheidungen statt einer grünen Momentaufnahme
- 01Reale Ausgabe prüfen
Die öffentlich erreichbare URL in Document URL einsetzen. So prüft der Dienst das HTML, das der Server tatsächlich ausliefert.
- 02Quelle mitführen
Show source aktivieren und Check auslösen. Meldung, Zeile und Spalte gemeinsam in das Ticket übernehmen.
- 03Erzeuger korrigieren
Bei wiederholten Fehlern die Komponente oder Vorlage ändern, nicht jede ausgelieferte Seite einzeln.
- 04Gleichen Umfang erneut prüfen
URL wiederholen und erst dokumentieren, wenn die konkrete Meldung verschwunden ist. Der Checker kann später neue Prüfungen ergänzen.
Prüfgrenze
Was die Maschine sieht – und was Menschen prüfen
HTML-Konformität liefert starke technische Indizien. Sie beantwortet nicht, ob ein Ablauf verständlich und mit assistiven Technologien bedienbar ist.
- doppelte IDs
- ungültige Verschachtelung
- unzulässige Attribute
- beschreibt der Alternativtext den Zweck?
- bleibt der Ablauf per Tastatur verständlich?
- ist die Fehlermeldung im Kontext hilfreich?
Aus dem Prüfbericht
Vier Regeln, vier Befunde
Prüfen Dieselbe id an zwei Elementen Regel duplicate-id-aria
Der Validator meldet den doppelten Wert, ARIA-Verweise darauf werden mehrdeutig. Eindeutige ids und nachgezogene Verweise beheben beides.
Kritisch Das Dokument nennt keine Sprache Regel html-has-lang
Der Validator rät zur Sprachangabe. Ein lang="de" am html-Element gibt der Sprachausgabe die passende Aussprache.
Kritisch Das title-Element ist leer Regel document-title
Der Validator meldet den leeren Titel. Ein gefüllter Titel benennt die Seite im Tab, in Lesezeichen und im Verlauf.
Kritisch Ein Feld ohne verbundene Beschriftung Regel label
Diese Stelle bleibt gültiges HTML und trotzdem eine Barriere. Ein label mit for macht den sichtbaren Text zum Namen des Feldes.
Zum Mitnehmen
Die Meldungen, korrigiert
Vier Ursachen, drei kleine Änderungen.
Korrektur in 3 Schritten ansehen
Sprache und Titel eintragen
Zwei Meldungen verschwinden gemeinsam. Die Sprachangabe gilt für das ganze Dokument, der Titel benennt die Seite.
KorrekturvergleichSchritt 1 · HTML Vorher
<html> <head> <meta charset="utf-8"> <title></title> </head>Nachher
<html lang="de"> <head> <meta charset="utf-8"> <title>Kontakt | Werkstatt Trave</title> </head>Markierte Zeilen wurden geändert
So prüfen Sie es Sehen Sie auf den Browser-Tab. Dort steht der Titel statt der Adresse.
IDs eindeutig vergeben
Jede id kommt nur einmal vor. Der Verweis zeigt danach eindeutig auf den Hinweis, der zu diesem Feld gehört.
KorrekturvergleichSchritt 2 · HTML Vorher
<p id="hinweis">Pflichtfeld</p> <input id="plz" aria-describedby="hinweis"> <p id="hinweis">Fünf Ziffern</p>Nachher
<p id="hinweis-pflicht">Pflichtfeld</p> <input id="plz" aria-describedby="hinweis-format"> <p id="hinweis-format">Fünf Ziffern</p>Markierte Zeilen wurden geändert
So prüfen Sie es Suchen Sie den id-Wert im Quelltext. Er taucht genau einmal auf.
Das Feld beschriften
Diese Zeile meldet kein Validator. Erst das label mit for gibt dem Feld den Namen, den Vorleseprogramme ansagen.
KorrekturvergleichSchritt 3 · HTML Vorher
<span>Postleitzahl</span> <input id="plz" type="text" inputmode="numeric">Nachher
<label for="plz">Postleitzahl</label> <input id="plz" type="text" inputmode="numeric">Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf das Wort „Postleitzahl“. Der Cursor springt ins Feld.