Creating hierarchy and aiding user navigation with HTML (Part 1): Headings structure

Semantische HTML-Elemente haben auch ganz praktische Vorteile für Screen Reader User: Sie erleichtern die Navigation und Orientierung auf einer Webseite.

Struktur und Beziehungen einzelner Komponenten auf einer Website erschließen sich dem Benutzer visuell: Überschriften sind oft groß und fett formatiert, Listenpunkte haben einen Punkt, Absätze einen Abstand, unterschiedliche Hintergrundfarben können Inhalte optisch voneinander abgrenzen.

Relevante Success Criteria

SC 1.3.1 Info and Relationships (Level A)
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
Wenn Text visuell wie eine Überschrift aussieht, muss dieser auch ein semantisches Heading Element benutzen. Umgekehrt dürfen auch keine semantischen Heading Elemente dazu benutzt werden, um einen visuellen Stil zu kreieren.
Visuelle und semantische Hierarchie müssen übereinstimmen.
SC 2.4.6 Headings and Labels (Level AA)
Headings and labels describe topic or purpose.
Überschriften müssen den nachfolgenden Text beschreiben.
Das gilt nur, wenn Überschriften vorhanden sind!
SC 2.4.10 Section Headings (Level AAA)
Section headings are used to organize the content.
Wenn Inhalte in Sections gegliedert sind, müssen beschreibende Headings für diese Sections verfügbar sein.

Technisch gesehen können alle Überschriften fehlen, mehrere h1-Überschriften auf der Seite sein, ... und die Seite ist trotzdem WCAG-konform. Aber günstig ist das nicht, da die Usability leidet.

HTML structural elements

Überschriften, Listen, Tabellen, Navigationen, Landmarks etc. können für Screen Reader User eine ähnliche Benutzererfahrung herstellen. Im Normalfall lesen Screenreader die Seite von oben nach unten vor. Strukturelemente können die Navigation auf einer Seite erleichtern, indem sie z.B. mit Shortcuts direkt angesprungen bzw. übersprungen werden können. Diese Shortcuts können aber nur funtkionieren, wenn das Markup der Seite stimmt.

SC 2.4.1 Bypass Blocks: »A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.«

YouTube-Video BingO Backery: Headings, Landmarks, and Tabs

Im Übrigen: nicht alle Screen Reader User sind blind, daher sollte die Benutzererfahrung für beide dieselbe sein.

Implementing an effective heading structure (and a document outline)

  • Überschriften sollen grundsätzlich den folgenden Inhalt zusammenfassen.
  • Nur eine <h1>-Überschrift pro Seite – diese sollte identisch mit dem Seitentitel sein
  • Die <h1>-Überschrift sollte direkt nach dem <main>-Element kommen. Die Überschrift beschreibt den Haupt-Inhalt der Seite, der ebenso durch das Main-Element repräsentiert wird.
  • Kein Heading-Level einfach auslassen!
  • Kein Heading-Element für Styling-Zwecke benutzen! Das wäre eine Verletzung von SC 1.3.1 Info and Relationships: »Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.«
  • Umkehrschluss: wenn es wie eine Überschrift aussieht, sollte es auch eine Überschrift sein.

Tools zum Testen einer Document Outline

Was ist mit <hgroup>?

Überschriften dürfen damit nicht gruppiert werden. Die Kombination einer Überschrift mit einem erklärenden <p> als Subheading ist aber erlaubt (und empfohlen?).

Wie repariert man eine Seite ohne Zugang zum HTML-Markup?

Mit ARIA role Attributes: role="heading" - by default ist das ein <h2>. Die Hierarchie kann mit aria-level="1" überschrieben werden.

Hilfestellung für Designer & Redakteure