Leere Überschrift (empty-heading)

Die Regel empty-heading meldet eine Überschrift ohne Text, den ein Screenreader vorlesen kann – ein leeres <h2> oder eines, das nur ein verstecktes Icon enthält. Screenreader-Nutzende hören „Überschrift Ebene 2“ und sonst nichts. Die Lösung: Geben Sie der Überschrift echten Text oder entfernen Sie das Überschriften-Element, wenn es nur für Abstand sorgt.

Was die Regel bedeutet

Jede Überschrift – h1 bis h6 oder ein Element mit role="heading" – braucht einen zugänglichen Namen. axe akzeptiert jede dieser Quellen:

• Text in der Überschrift, auch Text, der optisch versteckt, für Screenreader aber vorhanden ist,
• den alt-Text eines Bildes in der Überschrift,
• aria-label oder aria-labelledby,
• als letzte Möglichkeit ein title-Attribut.

Eine Überschrift, die nur Leerzeichen, ein geschütztes Leerzeichen, ein Icon mit aria-hidden="true" oder ein Bild mit alt="" enthält, fällt durch. Ganz versteckte Überschriften – mit display: none oder dem Attribut hidden – prüft die Regel nicht, weil sie niemand erreicht.

Wichtig: Das ist eine Best Practice, kein eigener WCAG-Verstoß. Sachlich gehört sie zu 1.3.1 Info und Beziehungen, weil eine leere Überschrift eine Struktur behauptet, die es nicht gibt, und zu 2.4.6 Überschriften und Beschriftungen, weil eine Überschrift beschreiben soll, was folgt.

Wen es betrifft

Vor allem blinde und sehbehinderte Menschen, die mit einem Screenreader arbeiten. Sie bewegen sich über Überschriften durch die Seite oder öffnen die Liste aller Überschriften. Eine leere erscheint dort als Lücke oder als „Überschrift Ebene 2“ ohne Worte. Das kostet einen Tastendruck, deutet fehlenden Inhalt an und macht die übrige Gliederung weniger verlässlich. Auch wer mit Sprachsteuerung arbeitet und eine Überschrift beim Namen nennt, um dorthin zu springen, hat nichts zu sagen.

Warum die Prüfung anschlägt

• Abstand mit Überschriften: Die Redaktion drückt im Texteditor in einem Überschriftenformat die Eingabetaste und hinterlässt ein leeres <h2>&nbsp;</h2>.
• Überschriften nur aus einem Icon: ein Kartentitel, der nur aus einem Icon-Font oder SVG mit aria-hidden="true" besteht.
• Leere Vorlagenfelder: Eine Teaser- oder Akkordeon-Komponente gibt ihr <h3> aus, auch wenn das Titelfeld leer blieb.
• Überschriften, die JavaScript füllt, und die leer bleiben, wenn die Daten nicht laden.
• Logos in Überschriften mit alt="", weil das Bild als dekorativ behandelt wurde.

So beheben Sie es

Klären Sie zuerst, ob es überhaupt eine Überschrift ist. Wenn ja, bekommt sie Text; wenn sie nur Platz schafft, übernimmt das CSS.

<!-- Vorher: ein leeres h2 als Abstandhalter und eine Überschrift nur mit Icon -->
<h2 class="section-spacer"></h2>
<div class="card">
  <h3 class="card__title"><span class="icon icon-star" aria-hidden="true"></span></h3>
  <p>Unsere beliebtesten Produkte in diesem Monat.</p>
</div>

<!-- Nachher: Abstand per div und CSS, die Überschrift hat echten Text -->
<div class="section-spacer"></div>
<div class="card">
  <h3 class="card__title"><span class="icon icon-star" aria-hidden="true"></span> Kundenlieblinge</h3>
  <p>Unsere beliebtesten Produkte in diesem Monat.</p>
</div>

Komponenten sollten das Überschriften-Element gar nicht ausgeben, wenn das Titelfeld leer ist. Im CMS räumen Sie leere Überschriften in der Quelltextansicht des Editors auf und prüfen, ob das Einfügen aus anderen Programmen sie erzeugt.

So prüfen Sie es von Hand

1. Öffnen Sie die Überschriftenliste: mit der kostenlosen Erweiterung HeadingsMap, der Strukturansicht der Erweiterung WAVE oder einem Screenreader (NVDA: Einfügen + F7, VoiceOver: VO + U).
2. Suchen Sie nach leeren Einträgen oder solchen, die nur „Überschrift“ sagen.
3. Lesen Sie den vorgelesenen Text jeder Überschrift für sich. Sagt er, worum es im Abschnitt geht?
4. Die Regel prüft nur, ob überhaupt Text da ist. Eine Überschrift „Mehr“ oder „Abschnitt 1“ besteht, ebenso eine, deren sichtbarer Text vom aria-label abweicht – beides muss ein Mensch beurteilen.

Zugehöriges WCAG-Kriterium

Keines direkt – empty-heading ist eine Best Practice. Sachlich gehört sie zu 1.3.1 Info und Beziehungen und 2.4.6 Überschriften und Beschriftungen. Ob Überschriften ihren Inhalt beschreiben (2.4.6), entscheidet keine automatische Prüfung; in Reviseberg bleibt dieses Kriterium „ungeprüft“, bis ein Mensch ein manuelles Ergebnis erfasst.

So meldet Reviseberg diese Regel

Reviseberg führt empty-heading auf jeder gecrawlten Seite aus. Jede leere Überschrift ist ein Vorkommen. Ein leeres Feld in einer gemeinsamen Komponente erscheint deshalb auf jeder Seite, die sie nutzt. In der Befundliste steht die Regel als Best Practice mit Schweregrad, der Zahl der Elemente und Seiten und den Punkten, die ein Fix zurückbringt; sie zählt nie gegen ein WCAG-Kriterium und erscheint in keinem Konformitätsbericht. Im Detail sehen Sie Selektor und HTML-Ausschnitt jeder Überschrift und alle betroffenen Seiten. Mit Begründung können Sie einen Befund als „ignorieren“ oder „Fehlalarm“ markieren; jede Entscheidung wird protokolliert.

Verwandte Regeln

• undefined – eine Überschrift, die eine Ebene überspringt.
• undefined – die Seite hat keine Überschrift der ersten Ebene.
• undefined – dasselbe Problem bei Links: kein Text zum Vorlesen.

Leere Überschriften auf Ihrer Website finden – kostenloser Scan