Semantic HTML Checker
Was Ihr HTML wirklich aussagt
Überschrift, Liste, Eintrag, Hauptbereich: vier Stellen im Seitengerüst.
Struktur-Röntgen
Gleiches Bild, völlig andere Navigation
Ein Semantic HTML Checker darf nicht beim Aussehen stehen bleiben. Diese Gegenüberstellung verfolgt dieselbe Seite vom Quelltext bis zur Struktur, die Browser und assistive Technik daraus bilden.
Native Elemente tragen Bedeutung
<main> <h1>Stadtbibliothek</h1> <section aria-labelledby="zeiten"> <h2 id="zeiten">Öffnungszeiten</h2> <ul><li>Bremen</li>…</ul> </section></main>• Kiel
Gestaltung imitiert nur die Form
<div class="main"> <p class="h1">Stadtbibliothek</p> <div class="bereich"> <p class="h2">Öffnungszeiten</p> <div>• Bremen<br>• Kiel</div> </div></div>• Kiel
Landmarks im Kontext lesen
Ein header am Dokumentanfang kann ein Banner sein. Derselbe header in einem article ist es nicht. Ein Zähler liefert deshalb Kandidaten, keine fertige Bewertung.
Ränge als Pfad prüfen
h1 → h2 → h3 beschreibt eine Unterordnung. Beim Schließen eines Unterabschnitts darf der Pfad wieder von h3 zu h2 zurückspringen.
Wiederholungen benennen
Zwei Navigationen sind nicht automatisch ein Fehler. Unterscheiden sich ihre Ziele, brauchen sie unterscheidbare Namen, etwa „Hauptmenü“ und „Servicemenü“.
Lokaler Struktur-Check
Erst Kandidaten sammeln, dann den Accessibility Tree ansehen
Der Befehl arbeitet auf der fertig gerenderten Seite. Er verändert nichts und markiert Überschriftssprünge sowie fehlerhafte direkte Listenkinder.
const all = (selector) =>
[...document.querySelectorAll(selector)];
const shortText = (element) =>
element.textContent.trim().replace(/\s+/g, ' ').slice(0, 60);
const headings = all('h1, h2, h3, h4, h5, h6');
console.table(headings.map((element, index) => {
const level = Number(element.tagName[1]);
const previous = index ? Number(headings[index - 1].tagName[1]) : level;
return {
Element: element.tagName.toLowerCase(),
Text: shortText(element),
Hinweis: level > previous + 1 ? `Sprung von h${previous}` : ''
};
}));
console.table(all('header, nav, main, aside, footer, section').map(
(element) => ({
Element: element.tagName.toLowerCase(),
Attribut: element.getAttribute('aria-label') ||
element.getAttribute('aria-labelledby') || '—'
})
));
const wrongListChildren = all('ul, ol').flatMap((list) =>
[...list.children].filter(
(child) => !child.matches('li, script, template')
)
);
const detachedItems = all('li').filter(
(item) => !item.parentElement?.matches('ul, ol, menu')
);
console.log('Direkte Listenkinder prüfen:', [
...wrongListChildren,
...detachedItems
]);Die Grenze des Skripts
Es liest Tags und Attribute, nicht die berechnete Semantik. Prüfen Sie die Treffer anschließend im Accessibility Tree der Browser-Entwicklerwerkzeuge. Dort sehen Sie etwa, ob eine benannte section wirklich als region erscheint.
So prüfen Sie die Struktur in drei Ansichten
- DOM: Öffnen Sie die Browser-Konsole, fügen Sie den Befehl ein und lesen Sie jeden Hinweis im Zusammenhang mit dem Inhalt.
- Accessibility Tree: Wählen Sie das Element in den Entwicklerwerkzeugen. Prüfen Sie berechnete Rolle, Name und Ebene.
- Navigation: Rufen Sie mit einem Vorleseprogramm die Überschriften- und Bereichsliste auf. Reihenfolge und Namen müssen den sichtbaren Aufbau erklären.
Aus dem Prüfbericht
Vier Stellen im eingefügten HTML
Kritisch Ein Absatz spielt Überschrift Regel p-as-heading
Der Abschnittstitel steht als gestalteter Absatz im HTML. Erst ein h2 oder h3 macht ihn im Strukturbaum sichtbar.
Kritisch Die Liste enthält einen fremden Absatz Regel list
Ein p steht direkt in der ul. Setzen Sie den Absatz davor, dann enthält die Liste nur ihre Einträge.
Kritisch Ein Eintrag ohne seine Liste Regel listitem
Ein li steht außerhalb von ul und ol. Im Code gehört es zwischen die Listentags, dann zählt es mit.
Prüfen Kein kurzer Weg zum Inhalt Regel bypass
Ohne Hauptbereich, Überschrift oder Sprunglink fehlt der direkte Weg in den Inhalt. Ein main um den Inhalt legt ihn an.
Zum Mitnehmen
Das Seitengerüst, korrigiert
Ein Element getauscht, die Liste aufgeräumt, ein main gesetzt.
Korrektur in 3 Schritten ansehen
Aus dem Absatz wird eine Überschrift
Die Klasse bleibt, das Element wechselt. Erst als h2 taucht die Zeile im Strukturbaum auf.
KorrekturvergleichSchritt 1 · HTML Vorher
<p class="gross">Öffnungszeiten</p> <p>Montag bis Freitag, 9 bis 17 Uhr.</p>Nachher
<h2 class="gross">Öffnungszeiten</h2> <p>Montag bis Freitag, 9 bis 17 Uhr.</p>Markierte Zeilen wurden geändert
So prüfen Sie es Springen Sie mit einem Vorleseprogramm von Überschrift zu Überschrift. „Öffnungszeiten“ ist dabei.
Liste und Eintrag zusammenführen
Der Absatz gehört vor die Liste, der Eintrag hinein. Danach steht in der ul nur noch, was zusammengehört.
KorrekturvergleichSchritt 2 · HTML Vorher
<ul> <p>Unsere Standorte</p> <li>Bremen</li> </ul> <li>Kiel</li>Nachher
<p>Unsere Standorte</p> <ul> <li>Bremen</li> <li>Kiel</li> </ul>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm kündigt „Liste mit zwei Einträgen“ an.
Den Inhalt als Hauptbereich auszeichnen
main benennt den Hauptbereich. Vorleseprogramme bieten dafür einen eigenen Sprung, ohne dass sich am Aussehen etwas ändert.
KorrekturvergleichSchritt 3 · HTML Vorher
<div class="inhalt"> <h1>Stadtbibliothek</h1> </div>Nachher
<main class="inhalt"> <h1>Stadtbibliothek</h1> </main>Markierte Zeilen wurden geändert
So prüfen Sie es Rufen Sie die Bereichsliste eines Vorleseprogramms auf. „Hauptbereich“ steht darin.