Die Regel page-has-heading-one meldet eine Seite ohne Überschrift der ersten Ebene – ohne h1 und ohne Überschrift mit aria-level="1". Screenreader-Nutzende können dann nicht per Überschrift zum Anfang des Inhalts springen. Die Lösung: Zeichnen Sie den sichtbaren Seitentitel als h1 aus.
Was die Regel bedeutet
Die h1 benennt, worum es auf einer Seite geht: die Schlagzeile des Artikels, den Produktnamen, „Öffnungszeiten“. Nach dem Aufruf einer Seite suchen Screenreader-Nutzende meist zuerst danach. Die Regel prüft das ganze Dokument einmal und ist erfüllt, sobald sie eines davon findet:
- ein
h1-Element ohneroleoderaria-level, das es verändert, - ein
h1- bish6-Element mitaria-level="1", - ein Element mit
role="heading"undaria-level="1".
Die Überschrift muss für assistive Technologien erreichbar sein – eine in display: none oder aria-hidden="true" zählt nicht –, darf aber optisch versteckt sein. Ob sie sinnvoll oder einmalig ist, prüft die Regel nicht; auch mehrere h1 bestehen. Solange ein modaler Dialog offen ist, lässt axe die Seite bestehen, weil der Inhalt dahinter ohnehin nicht erreichbar ist.
Wichtig: Das ist eine Best Practice, kein eigener WCAG-Verstoß. WCAG verlangt keine h1. Sachlich gehört die Regel zu 1.3.1 Info und Beziehungen, weil ein Seitentitel, der nur wie eine Überschrift aussieht, keine Struktur trägt, und zu 2.4.6 Überschriften und Beschriftungen.
Wen es betrifft
Vor allem blinde und sehbehinderte Menschen, die mit einem Screenreader arbeiten. Viele drücken die Taste 1 (in NVDA und JAWS) oder nutzen den Rotor in VoiceOver, um zur Überschrift der ersten Ebene zu springen und dort zu lesen. Die Screenreader-Umfrage von WebAIM zeigt seit Jahren: Die Navigation über Überschriften ist der häufigste Weg, auf einer langen Seite etwas zu finden [4]. Ohne h1 scheitert dieser Sprung oder landet bei einer Unterüberschrift weiter unten.
Warum die Prüfung anschlägt
- Der Seitentitel ist formatierter Text: ein
<p class="page-title">oder<div class="hero__title">, das wie eine Überschrift aussieht. - Das Logo ist die einzige
h1auf der Startseite und wurde danach aus allen anderen Vorlagen entfernt. - Themes, die bei
h2beginnen und erwarten, dass die Redaktion dieh1im Inhalt anlegt – was nicht geschah. - Titel im Bild oder Slider: Die Schlagzeile ist Teil eines Hero-Bildes oder einer Karussell-Folie ohne Textüberschrift.
- Single-Page-Apps, die die Überschrift erst nach dem Laden der Daten rendern oder in manchen Ansichten gar nicht.
So beheben Sie es
Suchen Sie den sichtbaren Titel der Seite und machen Sie daraus ein h1. Behalten Sie die Klasse, dann bleibt das Design, wie es ist.
<!-- Vorher: Der Titel sieht aus wie eine Überschrift, ist aber ein Absatz -->
<body>
<header><a href="/">Stadtbibliothek</a></header>
<main>
<p class="page-title">Öffnungszeiten</p>
<h2>Zentralbibliothek</h2>
<p>Montag bis Freitag, 9:00 bis 19:00 Uhr</p>
</main>
</body><!-- Nachher: derselbe Titel als h1, gleiche Klasse, gleiche Optik -->
<body>
<header><a href="/">Stadtbibliothek</a></header>
<main>
<h1 class="page-title">Öffnungszeiten</h1>
<h2>Zentralbibliothek</h2>
<p>Montag bis Freitag, 9:00 bis 19:00 Uhr</p>
</main>
</body>Dazu zwei Faustregeln:
- Eine
h1pro Seite ist das übliche Muster. Sie beschreibt den Inhalt dieser Seite – nicht den Namen der Website auf jeder Seite. - Setzen Sie sie an den Anfang des Hauptinhalts, in
<main>, damit Überschrift und Hauptbereich zur selben Stelle führen.
So prüfen Sie es von Hand
- Öffnen Sie die Überschriftenliste: mit der kostenlosen Erweiterung HeadingsMap, der Strukturansicht der Erweiterung WAVE oder einem Screenreader (NVDA: Einfügen + F7, VoiceOver: VO + U).
- Prüfen Sie, ob es eine Überschrift der ersten Ebene gibt und ob sie die Seite benennt – nicht die Website oder einen Abschnitt.
- Drücken Sie in NVDA oder JAWS die Taste 1: Der Fokus sollte am Anfang des Seiteninhalts landen.
- Die Regel prüft nur, ob es eine
h1gibt. Eine versteckteh1, eine nichtssagende („Willkommen“) oder eine, die nur den Namen der Website wiederholt, besteht die Regel und hilft trotzdem nicht.
Zugehöriges WCAG-Kriterium
Keines direkt – page-has-heading-one ist eine Best Practice. Sachlich gehört sie zu 1.3.1 Info und Beziehungen und 2.4.6 Überschriften und Beschriftungen. Überschriften sind außerdem ein Weg, 2.4.1 Blöcke umgehen zu erfüllen.
So meldet Reviseberg diese Regel
Reviseberg führt page-has-heading-one auf jeder gecrawlten Seite aus. Die Regel prüft das Dokument als Ganzes, deshalb zählt jede betroffene Seite als ein Vorkommen; fehlt die h1 in einer Vorlage, erscheint jede Seite, die darauf aufbaut. In der Befundliste steht die Regel als Best Practice mit Schweregrad, der Zahl der 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 alle betroffenen Seiten. Mit Begründung können Sie einen Befund als „ignorieren“ oder „Fehlalarm“ markieren; jede Entscheidung wird protokolliert.