Heading Hierarchy Checker
Die Gliederung prüfen, nicht die Schriftgröße
Seitenüberschrift, Abschnitte, fett gesetzte Absätze: drei Stellen in der Gliederung.
Dokumentkarte
Was groß aussieht, steht nicht automatisch in der Gliederung
Vergleichen Sie die sichtbare Seite mit ihrem HTML und der Überschriftenliste. Erst die drei Ansichten zusammen zeigen fehlende Überschriften und unplausible Ebenen.
So sieht die Seite aus
Bäckerei Sommer
Handwerk aus der Nachbarschaft.
Sortiment
Brot und Brötchen
Täglich frisch aus dem Steinofen.
Standorte
Öffnungszeiten
Barrierefreie Filialen
Adressen und Hinweise zur Anfahrt.
„Barrierefreie Filialen“ wirkt wie ein Untertitel. Die Schriftgröße verrät aber nicht, welches HTML-Element dahintersteht.
So steht es im HTML
<h1>Bäckerei Sommer<h2>Sortiment<h3>Brot und Brötchen<h2>Standorte<h4>ÖffnungszeitenEbene 3 fehlt<p>Barrierefreie Filialenkeine Überschrift
Der Sprung von h2 zu h4 ist ein Prüfsignal. Der Absatz ist trotz Gestaltung nicht als Überschrift ausgezeichnet.
So wird navigiert
- Ebene 1Bäckerei Sommer
- Ebene 2Sortiment
- Ebene 3Brot und Brötchen
- Ebene 2Standorte
- Ebene 4Öffnungszeiten
Fehlt: Barrierefreie Filialen
Überschriftennavigation folgt der Semantik. Der große Absatz fehlt vollständig; h4 wird mit seiner tatsächlichen Ebene angekündigt.
Ebenen beschreiben Verschachtelung
Gehen Sie für einen Unterabschnitt möglichst nur eine Ebene tiefer. Zurück zu einem übergeordneten oder gleichrangigen Abschnitt dürfen Sie mehrere Ebenen überspringen.
Die Dokumentkarte in der Konsole ausgeben
Der Befehl liest die Überschriften in DOM-Reihenfolge und markiert Sprünge zu einer tieferen Ebene. Er erkennt nicht, ob ein Absatz inhaltlich eine Überschrift sein sollte.
const selector = 'h1, h2, h3, h4, h5, h6';
let previous = 0;
for (const heading of document.querySelectorAll(selector)) {
const level = Number(heading.tagName.slice(1));
const skipped = previous && level > previous + 1;
const note = skipped ? ' ← Ebene übersprungen' : '';
const indent = ' '.repeat(level - 1);
console.log(indent + heading.tagName + ' ' +
heading.textContent.trim() + note);
previous = level;
}So prüfen Sie es
- Lesen Sie zuerst nur die sichtbaren Überschriften. Formulieren sie gemeinsam eine verständliche Inhaltsübersicht, ohne dass der Fließtext nötig ist?
- Führen Sie den Konsolenbefehl aus. Prüfen Sie jeden markierten Sprung gegen die echte Verschachtelung; ein Sprung zurück zu einer höheren Ebene ist normal.
- Vergleichen Sie große oder fett gesetzte Zeilen mit der Ausgabe. Beginnt eine fehlende Zeile einen Abschnitt, zeichnen Sie sie mit der passenden Überschriftenebene aus.
- Öffnen Sie die Überschriftenliste eines Screenreaders und springen Sie durch die Einträge. Reihenfolge, Ebene und Bezeichnung müssen zur Inhaltskarte passen.
Aus dem Prüfbericht
Ein Befund in der Gliederung
Kritisch Fett gesetzte Absätze statt Überschriften Regel p-as-heading
Der Checker meldet Absätze, die groß und fett gesetzt sind und einen Abschnitt beginnen. Als h3 wird diese Zeile anspringbar.
Zum Mitnehmen
Die Gliederung, korrigiert
Zwei Änderungen im HTML, eine im Stil.
Korrektur in 3 Schritten ansehen
Aus dem Absatz eine Überschrift machen
Der Absatz beginnt einen Unterabschnitt. Als h3 unter der h2 wird er anspringbar; die Gestaltungsklasse bleibt erhalten.
KorrekturvergleichSchritt 1 · HTML Vorher
<h2>Leistungen</h2> <p class="gross-fett">Beratung</p> <p>Wir begleiten Sie von der ersten Skizze an.</p>Nachher
<h2>Leistungen</h2> <h3 class="gross-fett">Beratung</h3> <p>Wir begleiten Sie von der ersten Skizze an.</p>Markierte Zeilen wurden geändert
So prüfen Sie es Springen Sie mit einem Vorleseprogramm von Überschrift zu Überschrift. „Beratung“ ist dabei.
Den Ebenensprung schließen
Die Ebenen folgen ohne Sprung. Auf h2 kommt h3, sonst wirkt die Gliederung wie ein fehlender Abschnitt dazwischen.
KorrekturvergleichSchritt 2 · HTML Vorher
<h2>Leistungen</h2> <h4>Beratung</h4>Nachher
<h2>Leistungen</h2> <h3>Beratung</h3>Markierte Zeilen wurden geändert
So prüfen Sie es Lesen Sie die Überschriften der Reihe nach. Jede Ebene liegt höchstens eine Stufe tiefer als die vorige.
Schriftgröße von der Ebene trennen
Die Ebene ergibt sich aus dem Inhalt, nicht aus der Schriftgröße. Ein eigener Stil für h3 macht die Hilfsklasse überflüssig.
KorrekturvergleichSchritt 3 · CSS Vorher
h3 { font-size: 1rem; } .gross-fett { font-size: 1.5rem; font-weight: 700; }Nachher
h3 { font-size: 1.5rem; font-weight: 700; }Markierte Zeilen wurden geändert
So prüfen Sie es Suchen Sie im HTML nach der Hilfsklasse. Sie kommt an dieser Stelle nicht mehr vor.