Praxisleitfaden Überschriften im HTML
Überschriften semantisch auszeichnen
Machen Sie aus optischer Gliederung eine navigierbare Überschriftenstruktur.
p-as-headingWCAG 1.3.1
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-p-as-heading.html
Befund verstehen
Große Schrift allein macht keine Überschrift
Erkannter Befund
Das fällt auf
p-as-heading meldet p.spme-faux-heading: „Faserprofil“ ist ein gestalteter Absatz.So ist es einzuordnen
Die Importkonsole hebt „Faserprofil“ groß und fett hervor. Im HTML steht dafür jedoch ein p-Element. Die folgende Erläuterung bildet mit dieser Zeile einen Unterabschnitt, dessen Überschrift programmatisch fehlt.
Das bedeutet es für die Nutzung
Wer mit einem Screenreader von Überschrift zu Überschrift springt, kann den Unterabschnitt „Faserprofil“ so nicht direkt erreichen. Die sichtbare Gliederung steht dieser Navigation nicht zur Verfügung.
- Regel
p-as-heading- Referenz
- WCAG 1.3.1
Semantik vor der Korrektur
p.spme-faux-heading
Text: Faserprofil
Element: p (Absatz)
Keine ÜberschriftenebeneÜberschriften im Inhalt beurteilen
Der Scan liefert Prüfansätze. Ob hervorgehobener Text einen Abschnitt einleitet und welche Ebene passt, beurteilen Sie im Seitenzusammenhang.
Rechenbeispiel · Überschriftenstruktur
- Annahme: zehn Inhaltsseiten mit jeweils einer zu prüfenden Gliederung.
- Annahme: fünf Minuten je Seite für Inhaltsfunktion und Überschriftennavigation.
- Textüberarbeitung, Umsetzung und weitere Nutzerwege sind nicht eingerechnet.
Das ist keine gemessene Prüfzeit und kein Vergleich mit der Scanner-Geschwindigkeit. Inhaltliche Beurteilungen bleiben manuelle Arbeit.
Leitet die Zeile einen Abschnitt ein?
Wählen Sie die Auszeichnung nach der Funktion im Inhalt, nicht nach der Schriftgröße.
| Fall | Wann trifft er zu? | Passende Umsetzung |
|---|---|---|
| Ein Unterabschnitt wie „Faserprofil“ | Die Zeile benennt den Inhalt des folgenden Absatzes innerhalb eines bereits überschriebenen Abschnitts. | Verwenden Sie eine echte Überschrift. Hier gehört h3 unter „Importkonsole für ältere Methodenblätter“ als h2. |
| Ein gleichrangiger Hauptabschnitt | Die Zeile eröffnet einen Abschnitt auf derselben Ebene wie die Importkonsole. | Wählen Sie dieselbe Überschriftenebene wie für die benachbarten Hauptabschnitte. |
| Nur ein betonter Satz | Der Text hebt eine Aussage hervor, ohne die folgenden Inhalte zu gliedern. | Behalten Sie den Absatz bei und prüfen Sie eine weniger missverständliche Gestaltung. Nicht jeder auffällige Text ist eine Überschrift. |
Seitenkontext lesen
Faserprofil innerhalb der Importkonsole
Der vollständige Konsolenausschnitt zeigt die übergeordnete Überschrift, den Unterabschnitt und die nachfolgenden Bedienelemente. So lässt sich die passende Hierarchie beurteilen.
„Faserprofil“ führt die Erläuterung zur historischen Probenspur ein. Die markierte Zeile übernimmt sichtbar eine Überschriftenfunktion, ist im Ausgangszustand aber lediglich ein Absatz.
HTML korrigieren
Den Absatz durch eine h3 ersetzen
Ersetzen Sie an dieser Stelle das p-Element durch h3. Text und Gestaltungsklasse bleiben erhalten; die Ebene ergibt sich aus der h2 der Importkonsole. Der nachfolgende Erklärungstext bleibt ein Absatz.
Was sich im Code ändert
Die geänderte Stelle im Beispiel. Unveränderter Anfang und Schluss sind hier ausgeblendet.
- Entfällt
<p class="spme-faux-heading">Faserprofil</p>- Kommt hinzu
<h3 class="spme-faux-heading">Faserprofil</h3>
Im CMS Wählen Sie für „Faserprofil“ das Format „Überschrift 3“. Prüfen Sie anschließend im veröffentlichten HTML, ob tatsächlich ein h3-Element ausgegeben wird.
Vollständigen Code vergleichen
Vorher
<h2>Importkonsole für ältere Methodenblätter</h2>
<p class="spme-faux-heading">Faserprofil</p>
<p>Diese längere Erläuterung …</p>Nachher
<h2>Importkonsole für ältere Methodenblätter</h2>
<h3 class="spme-faux-heading">Faserprofil</h3>
<p>Diese längere Erläuterung …</p>Markierte Zeilen wurden geändert
Struktur umsetzen
Ebene und Darstellung getrennt festlegen
Prüfen Sie beim Einbau die Hierarchie und das gerenderte Ergebnis gemeinsam.
- 1
Ermitteln Sie die übergeordnete Überschrift im Dokument: Im Beispiel ist die Importkonsole eine h2.
- 2
Verwenden Sie h3 für den untergeordneten Inhalt „Faserprofil“, auch wenn dessen Schrift größer wirkt als die h2.
- 3
Übertragen Sie bestehende Klassen und benötigte IDs auf das neue Element, damit Gestaltung und Verweise erhalten bleiben.
- 4
Prüfen Sie Abstände und Zeilenhöhe nach dem Elementwechsel: allgemeine h3-Regeln können das Layout beeinflussen.
- 5
Kontrollieren Sie dieselbe Inhaltskomponente auch in anderen Vorlagen und redaktionellen Varianten.
Fehlversuche vermeiden
Was die Gliederung weiterhin unzugänglich lässt
Nur font-weight oder strong ergänzen
Mehr Betonung gibt einem Absatz keine Überschriftenrolle. Die Navigation nach Überschriften gewinnt dadurch keinen neuen Eintrag.
Die Ebene nach der Optik wählen
Eine h1 für große Schrift würde „Faserprofil“ aus seiner inhaltlichen Hierarchie lösen. Schriftgröße gehört ins CSS, die Ebene folgt dem Abschnitt.
Jede hervorgehobene Zeile umwandeln
Preise, Kennzahlen und betonte Sätze sind nicht automatisch Überschriften. Prüfen Sie zuerst, ob die Zeile nachfolgenden Inhalt gliedert.
Nur das Verschwinden der Markierung bewerten
Ein kleiner gestalteter Absatz könnte die Heuristik nicht mehr auslösen. Die Überschriftenfunktion wäre damit noch nicht ausgezeichnet.
Der Unterabschnitt besitzt jetzt eine Überschriftenebene
Die Laufzeitkorrektur ersetzt den beanstandeten Absatz durch h3. Axe findet den ursprünglichen p-Selektor nicht mehr und meldet am Ersatz weder einen p-as-heading-Verstoß noch ein unvollständiges Ergebnis.
Im Beispiel dokumentiert
Gelöst
„Faserprofil“ ist jetzt h3 statt p und liegt unter der h2 der Importkonsole.
Was Sie zusätzlich beurteilen müssen
Verifiziert ist der Ersatz an dieser Fundstelle. Die inhaltliche Hierarchie der gesamten Seite und ihre übrigen Barrieren benötigen eigene Prüfungen.
Auffällige Absätze finden, die Gliederung beurteilenPrüfauftrag für Ihre Umsetzung
- Im DOM prüfen: „Faserprofil“ steht in h3 und die nachfolgende Erläuterung weiterhin in p.
- Die Überschriftenliste des Screenreaders öffnen und „Faserprofil“ unter der h2 der Importkonsole aufrufen.
- Die veröffentlichte Seite erneut scannen und weitere Fundstellen einzeln nach ihrer Inhaltsfunktion beurteilen.
Semantik nach der Korrektur
h3.spme-faux-heading
Text: Faserprofil
Element: h3 (Überschrift, Ebene 3)
Übergeordnet: h2 „Importkonsole für ältere Methodenblätter“
Axe: ursprünglicher Absatz entfernt; Ersatz ohne RegelbefundPrüfgrenzen kennen
Auffällige Absätze finden, die Gliederung beurteilen
Die Regel nutzt Gestaltungshinweise. Ob eine Zeile wirklich eine Überschrift ist, ergibt sich aus dem Inhalt.
Automatisch prüfbar
- Als Überschrift gestaltete p-Elemente anhand der Regelheuristik erkennen.
- Den erkannten Absatz mit Selektor und Bildausschnitt zuordnen.
- Nach dem Ersatz feststellen, dass der ursprüngliche Absatz fehlt und der Ersatz keinen Befund dieser Regel auslöst.
Im Kontext zu entscheiden
- Entscheiden, welche hervorgehobenen Texte tatsächlich Abschnitte benennen.
- Die Ebenen aller Überschriften mit der inhaltlichen Gliederung abgleichen.
- Mit Screenreader-Navigation prüfen, ob die relevanten Abschnitte verständlich erreichbar sind.
- Auch unauffällige oder anders ausgezeichnete Scheinüberschriften prüfen, die diese Absatzregel nicht erkennt.