<h1>–<h6>: Die HTML Abschnittsüberschrift-Elemente

Diese Elemente beinhalten nur die globalen Attribute.

• Überschrifteninformationen können von Benutzeragenten genutzt werden, um automatisch ein Inhaltsverzeichnis für ein Dokument zu erstellen.
• Verwenden Sie Überschrift-Elemente nicht, um Text zu vergrößern. Stattdessen sollten Sie die CSS font-size-Eigenschaft verwenden.
• Überspringen Sie keine Überschriftsebenen: Beginnen Sie stets mit <h1>, gefolgt von <h2> und so weiter.

Obwohl die Verwendung mehrerer <h1>-Elemente auf einer Seite vom HTML-Standard erlaubt ist (solange sie nicht verschachtelt sind), wird dies nicht als Best Practice angesehen. Eine Seite sollte in der Regel ein einzelnes <h1>-Element haben, das den Inhalt der Seite beschreibt (ähnlich dem <title>-Element des Dokuments).

Bevorzugen Sie die Verwendung eines einzigen <h1> pro Seite und verschachteln Sie Überschriften, ohne Ebenen zu überspringen.

Eine gängige Navigationstechnik für Benutzer von Screenreading-Software ist das schnelle Springen von Überschrift zu Überschrift, um den Inhalt der Seite zu bestimmen. Aus diesem Grund ist es wichtig, keine Überschriftsebene zu überspringen. Wenn dies geschieht, kann es zu Verwirrung führen, da die Person, die auf diese Weise navigiert, sich fragen könnte, wo die fehlende Überschrift ist.

Vermeiden Sie dies:

<h1>Heading level 1</h1>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>

Bevorzugen Sie dies:

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>

Verschachtelung

Überschriften können als Unterabschnitte verschachtelt werden, um die Organisation des Inhalts der Seite widerzuspiegeln. Die meisten Screenreader können auch eine geordnete Liste aller Überschriften auf einer Seite erstellen, die einer Person hilft, die Inhaltsstruktur schnell zu bestimmen und zu verschiedenen Überschriften zu navigieren.

Bei der folgenden Seitenstruktur:

<h1>Beetles</h1>

<h2>Etymology</h2>

<h2>Distribution and Diversity</h2>

<h2>Evolution</h2>
<h3>Late Paleozoic</h3>
<h3>Jurassic</h3>
<h3>Cretaceous</h3>
<h3>Cenozoic</h3>

<h2>External Morphology</h2>
<h3>Head</h3>
<h4>Mouthparts</h4>
<h3>Thorax</h3>
<h4>Prothorax</h4>
<h4>Pterothorax</h4>
<h3>Legs</h3>
<h3>Wings</h3>
<h3>Abdomen</h3>

Würden Screenreader eine Liste wie diese erstellen:

1. h1 Käfer

   1. h2 Etymologie

   2. h2 Verbreitung und Vielfalt

   3. h2 Evolution

      1. h3 Spät-Paläozoikum
      2. h3 Jura
      3. h3 Kreidezeit
      4. h3 Känozoikum

   4. h2 Äußere Morphologie

      1. h3 Kopf

         1. h4 Mundteile

      2. h3 Thorax

         1. h4 Prothorax
         2. h4 Pterothorax

      3. h3 Beine

      4. h3 Flügel

      5. h3 Abdomen

Wenn Überschriften verschachtelt sind, können Überschriftsebenen beim Schließen eines Unterabschnitts "übersprungen" werden.

• Überschriften • Seitenstruktur • WAI Web Accessibility Tutorials
• MDN Verständnis von WCAG, Richtlinie 1.3 Erklärungen
• Verständnis des Erfolgskriteriums 1.3.1 | W3C Verständnis von WCAG 2.0
• MDN Verständnis von WCAG, Richtlinie 2.4 Erklärungen
• Verständnis des Erfolgskriteriums 2.4.1 | W3C Verständnis von WCAG 2.0
• Verständnis des Erfolgskriteriums 2.4.6 | W3C Verständnis von WCAG 2.0
• Verständnis des Erfolgskriteriums 2.4.10 | W3C Verständnis von WCAG 2.0

Eine weitere gängige Navigationstechnik für Benutzer von Screenreading-Software ist es, eine Liste von Bereichsinhalten zu generieren und diese zu verwenden, um das Layout der Seite zu bestimmen.

Bereichsinhalte können unter Verwendung einer Kombination der Attribute aria-labelledby und id beschriftet werden, wobei die Beschriftung den Zweck des Bereichs knapp beschreibt. Diese Technik ist nützlich in Situationen, in denen mehr als ein Abschnittselement auf derselben Seite vorhanden ist.

Beispiele für Bereichsinhalte

<header>
  <nav aria-labelledby="primary-navigation">
    <h2 id="primary-navigation">Primary navigation</h2>
    <!-- navigation items -->
  </nav>
</header>

<!-- page content -->

<footer>
  <nav aria-labelledby="footer-navigation">
    <h2 id="footer-navigation">Footer navigation</h2>
    <!-- navigation items -->
  </nav>
</footer>

In diesem Beispiel würde die Screenreader-Technologie ankündigen, dass es zwei <nav> Bereiche gibt, einen mit dem Namen "Primäre Navigation" und einen mit dem Namen "Fußzeilen-Navigation". Wenn keine Beschriftungen bereitgestellt würden, müsste die Person, die Screenreading-Software verwendet, möglicherweise den Inhalt jedes nav-Elements untersuchen, um dessen Zweck zu bestimmen.

• Verwendung des aria-labelledby Attributs
• Bereiche Beschriften • Seitenstruktur • W3C WAI Web Accessibility Tutorials

Der folgende Code zeigt alle verwendeten Überschriftenebenen.

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

Der folgende Code zeigt einige Überschriften mit einigen Inhalten darunter.

<h1>Heading elements</h1>
<h2>Summary</h2>
<p>Some text here…</p>

<h2>Examples</h2>
<h3>Example 1</h3>
<p>Some text here…</p>

<h3>Example 2</h3>
<p>Some text here…</p>

<h2>See also</h2>
<p>Some text here…</p>

• <p>
• <div>
• <section>