WCAG 2.0, 1.3.1 a, A

Info und Beziehungen: Überschriften

  • WCAG: 2.0
  • Stufe: A
  • Thema: Semantik

Alle Inhaltsblöcke einer Seite müssen mit korrekt verschachtelten Überschriften versehen sein. Dies ermöglicht es assistierenden Technologien (z.B. Screenreadern), die Struktur und Inhalte der Seite zu erfassen und eine schnelle Übersicht sowie Navigation darin anzubieten.

Verstehen

Es ist wichtig, dass die Überschriftenstruktur einer Seite die Inhalte derselben detailliert abbildet und hierarchisch korrekt ist (z.B. keine übersprungenen Ebenen). Dies gilt nicht nur für den Hauptinhalt einer Seite, sondern auch für visuell klar abtrennbare Bereiche, welche weitere Inhalte beherbergen, wie etwa Kopf- und Fussbereiche, Navigation, weiterführende Informationen, Werbung, etc. Sollte das visuelle Design gewisse Überschriften nicht vorsehen, dann können diese auf visueller Ebene versteckt werden.

Es müssen die Elemente <h1> bis <h6> verwendet werden; andere Formatierungen (wie etwa das <strong>-Element) reichen nicht. Stellen Sie sicher, dass eine Seite stets über eine Überschrift erster Ebene (<h1>) verfügt und dass diese den Hauptinhalt benennt; es dürfen daneben durchaus weitere <h1>-Elemente existieren, sofern dies nicht durch andere Anforderungen (z.B. Suchmaschinenoptimierung) ausgeschlossen wird.

Überschriften sind im DOM generell das erste Element eines Inhaltsblocks. Sie benötigen immer einen nachfolgenden Inhalt (etwa Text, Listen, Tabellen, o.ä.) und beschreiben diesen prägnant, siehe auch 2.4.6.

Hinweis: Tauchen Überschriften ohne nachfolgenden Inhalt auf, dann wird besser eine Auflistung (z.B. <ul>) verwendet, siehe auch 1.3.1b.

Wichtig: Der HTML 5 Outline Algorithmus wird von assistierenden Technologien nicht unterstützt.

Verantwortlichkeiten

  • Das Entwicklungsteam versieht die Seitenbereiche und Funktionalitäten mit Überschriften. Es schafft zudem die notwendigen technischen Voraussetzungen für die Inhaltserstellung, etwa die Möglichkeit zum Wählen verschiedener Überschriftenebenen als Formatvorlagen in einem WYSIWYG-Editor.
  • Die Inhaltsverantwortlichen versehen die erstellten Inhalte mit aussagekräftigen und hierarchisch korrekten Überschriften.

WCAG-Text

Info und Beziehungen: Informationen, Struktur und Beziehungen, die über die Darstellung vermittelt werden, können durch Software bestimmt werden oder stehen in Textform zur Verfügung.

Code-Beispiel

<style>
/* Schiebt das Element aus dem sichtbaren Bereich des Bildschirms, ohne es tatsächlich zu entfernen */
.visually-hidden {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
</style>

<header>
  <h1 class="visually-hidden">Kopfzeile</h1><!-- Visuell versteckte Überschrift -->

  <p>John Doe's Web Präsenz</p>
</header>
<nav>
  <h1 class="visually-hidden">Navigation</h1>

  <ul>
    <li><a href="...">Startseite</a></li>
    <li><a href="...">Hobbys</a></li>
    <li><a href="...">Über</a></li>
    <li><a href="...">Etc.</a></li>
  </ul>
</nav>
<main>
  <h1>Meine Hobbys</h1><!-- Normale Überschrift -->

  <h2>Körperliche Aktivitäten</h2>

  <h3>Fussball Spielen</h3>
  <p>Fussball ist ein Sport, der zwischen zwei Teams von elf Spielenden mit einem kugelförmigen Ball gespielt wird.</p>

  <h3>Tanzen</h3>
  <p>Der Tanz ist eine darstellende Kunstform, die aus gezielt ausgewählten Sequenzen menschlicher Bewegung besteht.</p>

  <h2>Entspannung</h2>

  <h3>Filme Kucken</h3>
  <p>Ein Film ist eine Serie von Standbildern, die aufgrund des Phi-Phänomens die Illusion von bewegten Bildern erzeugt.</p>
</main>
<footer>
  <h1 class="visually-hidden">Fusszeile</h1>
  <p>Copyright 2057 John Doe</p>
</footer>