Überschriftenstruktur und Landmarks

Eine verbreitete Art, eine Seite mit dem Screenreader zu lesen, ist das Springen von Überschrift zu Überschrift. Eine Seite ohne h2-Elemente liest sich dann wie ein Buch ohne Kapitel.

Überschriften sind ein Inhaltsverzeichnis

Sehende Leserinnen und Leser überfliegen. Sie werfen einen Blick auf die großen fetten Zeilen, finden den gewünschten Abschnitt und lesen dort los. Screenreader-Nutzer machen dasselbe mit Überschriften. MDN merkt an, dass eine verbreitete Technik das schnelle Springen von Überschrift zu Überschrift ist, um herauszufinden, was eine Seite enthält, und dass die meisten Screenreader alle Überschriften der Seite auflisten können. Das klappt nur, wenn die Überschriften echte Elemente h1 bis h6 sind. Ein Absatz, der mit CSS groß und fett gemacht wurde, sieht aus wie eine Überschrift, wird aber als gewöhnlicher Text angesagt.

Die WCAG 2.2 behandeln das im Erfolgskriterium 1.3.1 Info und Beziehungen auf Stufe A: Struktur, die visuell gezeigt wird, muss auch im Code vorhanden sein. Kriterium 2.4.6 Überschriften und Beschriftungen auf Stufe AA ergänzt, dass Überschriften das Thema ihres Abschnitts beschreiben müssen. Eine Überschrift „Mehr“ oder „Abschnitt 2“ besteht den ersten Test und fällt beim zweiten durch.

Drei Regeln von MDN

Erstens: Überspring keine Ebenen. Geh von h1 zu h2 zu h3. Wer direkt nach dem h1 ein h4 hört, fragt sich, wo die fehlenden Ebenen geblieben sind. Zweitens: Nimm lieber ein einziges h1 pro Seite, das ihren Inhalt benennt, ähnlich wie das Element title. Der HTML-Standard erlaubt mehrere, aber MDN beschreibt ein h1 als übliche gute Praxis. Drittens: Wähl eine Überschriftenebene nicht nach ihrer Größe. Wirkt ein h3 zu klein, ändere die Schriftgröße in CSS und behalte die Ebene, die zur Struktur passt.

Überschriften schreiben, mit denen man etwas anfangen kann

Eine Überschriftenliste ist nur so gut wie ihre Wörter. Setz das nützliche Wort an den Anfang, denn wer eine Liste von zwanzig Überschriften überfliegt, hört jeweils den Anfang und geht weiter: „Öffnungszeiten“ funktioniert besser als „Wann du uns besuchen kannst“. Halte Überschriften kurz und voneinander verschieden, damit nie zwei Abschnitte beide „Details“ heißen. Dann teste die Gliederung. Der Barrierefreiheitsbereich in den Entwicklerwerkzeugen eines Browsers oder die Überschriftenliste eines Screenreaders zeigt die Überschriften allein. Lies sie hintereinander und frag dich, ob sie als Inhaltsverzeichnis Sinn ergeben. Wenn ja, profitieren auch sehende Überflieger.

Landmarks

Überschriften gliedern den Inhalt, Landmarks gliedern die Seite in Bereiche. Die Elemente header, nav, main und footer tragen jeweils eine eingebaute Rolle, sodass ein Screenreader eine Liste der Bereiche anbieten und direkt zum Hauptinhalt oder zur Navigation springen kann. Eine Seite hat normalerweise ein main. Diese Rollen bekommst du gratis, indem du das richtige Element wählst, und das ist die erste Regel von ARIA in Aktion: keine zusätzlichen Attribute nötig.

<header>
  <nav>
    <a href="/">Home</a> <a href="/menu">Menu</a>
  </nav>
</header>
<main>
  <h1>Corner Bakery</h1>
  <h2>Bread</h2>
  <h3>Sourdough</h3>
</main>
<footer>12 Mill Lane</footer>