Zum Hauptinhalt springen

Bessere Zugänglichkeit durch Überschriften- und Inhaltsstruktur

Die Struktur eine Webseite sollte gut überlegt sein. Eine Seite mit umfangreichem Inhalt benötigt Überschriften, um es Screenreader Nutzern zu erleichtern, durch die Seite zu navigieren und den Zusammenhang innerhalb des Inhalts zu verstehen. Die Überschriften-Elemente (h1 – h6) sollten nicht nur zur visuallen Formatierung benutzt, sondern sinnvoll eingesesetzt werden. Es dürfen keine Ordnungs-Ebenen übersprungen werden (auf h1 folgt h2 usw.).

Nach einer Überschrift wird Inhalt erwartet, deshalb sollte man nach einer Überschrift derselben Ordnung immer Inhalt einfügen, z. B. Text.

Daraus ergeben sich diese zwei Fragen in Bezug auf Überschriften:

  • Sinnvolle Beschreibung: besagt diese Überschrift eindeutig, welche Art von Inhalt darauf folgt?
  • Inhalt: Kommt nach der Überschrift Inhalt?

Dies sind die Grundregeln:

  • Es gibt nur eine h1 pro Seite (ein Titel eines Buchs)
  • Keine Ebenen überspringen (keinen Unterabschnitt vorstellen ohne das Kapitel zuerst vorzustellen). Es ist möglich, eine h2 vor einer h1 auf einer Seite zu haben, aber nur wenn sich diese h2 in einer section oder landmark befindet, z. B. wenn man in einer <nav> Navigation, die vor der h1 kommt, eine Überschrift braucht. Dies ist aber nicht empfohlen. Besser ist es, wenn vor der h1 keine andere Überschrift kommt.
  • Überschriften nicht zum reinen Formatieren des Textes verwenden, es muss immer eine semantische Bedeutung dabei sein.

Zur <h1> 

Es ist keine Verletzung des WCAG AA Standards, mehrere <h1>-Elemente zu verwenden, aber es ist schlecht für A11y und für SEO. Es ist dringend empfehlenswert und gilt als Best Practice, nur eine <h1> pro Seite zu haben, um eine klare Hierarchie und Struktur zu gewährleisten.

Warum ist nur eine <h1> sinnvoll?

  1. Semantische Klarheit: Das <h1>-Element sollte die Hauptüberschrift der Seite sein und den Inhalt der gesamten Seite zusammenfassen. Dies hilft Screenreadern und Suchmaschinen, den Hauptinhalt der Seite schnell zu erkennen.
  2. Navigation für assistive Technologien: Viele Screenreader und Hilfsmittel ermöglichen es Nutzern, direkt zu <h1>-Elementen zu springen. Mehrere <h1>-Elemente können dabei verwirrend sein.
  3. Hierarchie und Struktur: Eine klare und logische Überschriftenstruktur (<h1> bis <h6>) erleichtert das Verständnis und die Navigation.

Quellen:

Ein sehr guter Artikel, in dem es um zugängliche Überschriften geht, ist „The A11y Project – Accessible Heading Structure.

When there is no content between headings

The Bootcamper’s Guide to Accessibility“ by Lindsey Kopacz