Überschriftenhierarchie für Screenreader

So navigieren Screenreader durch Überschriften

Überschriftenliste im Screenreader

<!-- A well-structured page with this heading order: -->
<h1>HTML5 Complete Guide</h1>
  <h2>Document Structure</h2>
    <h3>The DOCTYPE</h3>
    <h3>The html head body</h3>
  <h2>Semantic Elements</h2>
    <h3>Article</h3>
    <h3>Section</h3>

<!-- Becomes a navigable list for screen reader users -->
<!-- Similar to a table of contents in a book -->

Falsche Überschriftenhierarchie

<!-- BAD: skipping h2, going straight from h1 to h3 -->
<h1>My Article</h1>
<h3>Introduction</h3>    <!-- Skips h2! -->
<h4>Background</h4>

<!-- BAD: using headings for visual size -->
<h4 class="huge-title">This looks big</h4>  <!-- h4 in logical order? -->

<!-- BAD: using bold text instead of headings for sections -->
<p><strong>Introduction</strong></p>  <!-- Not a heading at all -->

Korrekte Hierarchie in der Praxis

<h1>HTML Forms Documentation</h1>
<h2>Overview</h2>
<h2>Form Elements</h2>
  <h3>input</h3>
    <h4>text type</h4>
    <h4>email type</h4>
  <h3>select</h3>
  <h3>textarea</h3>
<h2>Validation</h2>
  <h3>Built-in Validation</h3>
  <h3>Custom Validation</h3>

Ein h1 pro Seite

<h1>JavaScript Array Methods</h1>
<!-- This is the page's main topic -->
<!-- Should match or closely relate to the <title> element -->
<!-- Appears as the main heading users see first -->
<!-- Search engines give it the highest SEO weight -->

Überschriftenebenen spiegeln die Inhaltshierarchie wider

Keine Überschriften für die visuelle Gestaltung

/* BAD approach: h4 because it looks right: */
<h4 style="font-size: 2rem;">Section Title</h4>

/* CORRECT approach: right level, resized with CSS: */
<h2>Section Title</h2>
/* Then: h2 { font-size: 2rem; } */

/* Or: aria-label on section if heading would disrupt structure:
   — rare, usually better to fix the heading level */

WCAG 2.4.6 Überschriften und Beschriftungen

Überschriften in Komponenten verwenden

<!-- BAD: hardcoded heading level in a card component -->
<div class="card">
  <h3>Card Title</h3>  <!-- What if card appears in h2 or h4 context? -->
</div>

<!-- GOOD: document context determines level -->
<!-- Component receives level as a parameter in JS frameworks -->
<!-- Or use aria-level on a generic element -->
<div role="heading" aria-level="3">Dynamic Level Heading</div>

Die Dokumentstruktur

Überschriften und SEO aufeinander abstimmen

Navigation überspringen und Überschriften

<!-- Skip link bypasses nav to main content: -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<!-- Main content heading enables heading navigation: -->
<main id="main-content">
  <h1>Page Title</h1>
</main>
<!-- Screen reader users: skip link for fast access;
     heading navigation for page exploration -->

Schnelltest

Zusammenfassung: Überschriftenhierarchie