Heading Structure Checker
Die Ebenen auslesen und im Inhalt beurteilen
Zwischentitel, Ebenenfolge, Sprunglink: was ein Prüflauf zeigt und was nicht.
Dokument → Gliederung
Drei Ansichten, ein belastbarer Überschriften-Check
Eine Liste allein reicht nicht. Ordnen Sie sichtbare Abschnittsanfänge, HTML-Elemente und die Barrierefreiheitsstruktur einander zu.
Sichtbare Seite
Autowerkstatt in Lübeck
h1 Werkstatt Trave
Wartung und Reparatur für alle Fabrikate.
h2 Leistungen
Vom Reifenwechsel bis zur Inspektion.
h3 Reparaturen
Wir erklären Befund und Kosten vorab.
p Öffnungszeiten
Montag bis Freitag, 8 bis 17 Uhr.
ARIA 3 Terminvereinbarung
Termine telefonisch oder per E-Mail.
Ansicht 1
DOM-Liste
h1…h6- 1Werkstatt Trave
- 2Leistungen
- 3Reparaturen
Fehlt: „Terminvereinbarung“, weil der reine Element-Selektor keine ARIA-Rolle abfragt.
Ansicht 2
Barrierefreiheitsbaum
role + level- 1Werkstatt Trave
- 2Leistungen
- 3Reparaturen
- 3TerminvereinbarungARIA
Fehlt weiterhin: „Öffnungszeiten“. Ein groß gestalteter Absatz erhält dadurch keine Überschriften-Semantik.
Ansicht 3
Inhaltliche Prüfung
Beginnt hier sichtbar ein neuer Abschnitt?
Öffnungszeiten
Sieht wie eine Überschrift aus, steht aber in keiner Liste.
Korrektur: Als h3 unter „Leistungen“ auszeichnen, sofern der Inhalt tatsächlich zu diesem Abschnitt gehört.
Markup erfassen
Native h1 bis h6 in Dokumentreihenfolge auflisten.
Semantik vergleichen
Im Browser prüfen, welche Rollen, Namen und Ebenen assistiven Techniken tatsächlich angeboten werden.
Inhalt beurteilen
Prüfen, ob jeder sichtbare Abschnittsanfang ausgezeichnet ist und sein Titel den folgenden Inhalt beschreibt.
Werkzeug für Ansicht 1
Native und ARIA-Überschriften gemeinsam inventarisieren
Der erweiterte Konsolenbefehl erfasst beide Varianten. Er ersetzt den Barrierefreiheitsbaum nicht, macht aber Abweichungen für die gezielte Prüfung sichtbar.
- Reihenfolge: Entspricht sie dem Lesefluss?
- Beziehung: Folgt etwa auf
h2direkth4, obwohl eine Unterebene fehlt? - Text: Beschreibt jede Überschrift den folgenden Abschnitt?
- Abgleich: Fehlt ein optisch hervorgehobener Abschnittsanfang in beiden Listen?
const selector =
'h1,h2,h3,h4,h5,h6,[role="heading"]';
const rows = [...document.querySelectorAll(selector)]
.map((el) => ({
level: /^H[1-6]$/.test(el.tagName)
? Number(el.tagName.slice(1))
: Number(el.getAttribute('aria-level')),
text: el.textContent.trim(),
}));
console.table(rows);Aus dem Prüfbericht
Zwei Regeln, zwei Befunde
Kritisch Ein gestalteter Absatz fehlt in der Liste Regel p-as-heading
Der Checker listet nur echte h1 bis h6. Ein groß gesetztes p taucht dort nicht auf; machen Sie daraus die Überschrift, die es sein soll.
Prüfen Kein kurzer Weg zum Inhalt Regel bypass
Findet die Prüfung weder Überschrift noch Hauptbereich noch Sprunglink, führt kein schneller Weg zum Text. Ein Sprunglink am Anfang und ein main schaffen ihn.
Zum Mitnehmen
Die Gliederung, korrigiert
Eine echte Überschrift, ein Hauptbereich, ein Sprunglink.
Korrektur in 2 Schritten ansehen
Den gestalteten Absatz zur Überschrift machen
Der Zwischentitel wird ein h3 unter der h2 des Abschnitts. Die Klasse bleibt, damit die Gestaltung unverändert aussieht.
KorrekturvergleichSchritt 1 · HTML Vorher
<h2>Unsere Werkstatt</h2> <p class="titelzeile">Öffnungszeiten</p> <p>Montag bis Freitag, 8 bis 17 Uhr.</p>Nachher
<h2>Unsere Werkstatt</h2> <h3 class="titelzeile">Öffnungszeiten</h3> <p>Montag bis Freitag, 8 bis 17 Uhr.</p>Markierte Zeilen wurden geändert
So prüfen Sie es Lesen Sie die Überschriftenliste erneut aus. „Öffnungszeiten“ steht jetzt unter „Unsere Werkstatt“.
Hauptbereich auszeichnen und Sprunglink setzen
Ein Sprunglink als erstes Element und ein main um den Inhalt geben einen kurzen Weg an der Navigation vorbei.
KorrekturvergleichSchritt 2 · HTML Vorher
<body> <div class="navigation">…</div> <div class="inhalt"> <h1>Unsere Werkstatt</h1> </div> </body>Nachher
<body> <a class="sprunglink" href="#inhalt">Zum Inhalt springen</a> <div class="navigation">…</div> <main id="inhalt" class="inhalt"> <h1>Unsere Werkstatt</h1> </main> </body>Markierte Zeilen wurden geändert
So prüfen Sie es Laden Sie die Seite neu und drücken Sie einmal Tab. Der Sprunglink wird sichtbar und führt zum Inhalt.