2.4.6 Headings and Labels

WCAG – Definition

Überschriften (Headings) und Labels (Beschriftungen von Formularfeldern, Buttons etc.) müssen aussagekräftig und beschreibend sein, sodass Nutzer den Zweck und Inhalt des Bereichs erkennen können.

Bedeutung

  • Menschen mit Screenreadern springen oft direkt zwischen Überschriften → klare, strukturierte Headings sind für Orientierung entscheidend.

  • Formulareingaben ohne verständliche Labels sind für Nutzer mit kognitiven Einschränkungen oder assistiven Technologien unbrauchbar.

  • Auch für alle Nutzer steigert es die Usability und Verständlichkeit.

Ausreichende Techniken

Korrekte Verwendung von Headings (H1–H6)

<h1>Shop</h1>
<h2>Kategorie: Schuhe</h2>
<h3>Damen</h3>
<h3>Herren</h3>

Logische Hierarchie, keine Sprünge (kein <h1> → <h4>).

Labels für Formulare

<label for="email">E-Mail-Adresse</label>
<input type="email" id="email" name="email">

Beschriftung erklärt Zweck klar und präzise.

Buttons eindeutig beschriften

Schlecht:

<button>OK</button>

Gut:

<button>Nachricht senden</button>

Accessible Name mit aria-label oder aria-labelledby

Wenn kein sichtbarer Text möglich ist:

<input type="text" aria-label="Suchbegriff eingeben">

Headings zur Gliederung statt reinem Styling

Keine <div class="title"> ohne Semantik. Besser:

<h2 class="title">Unsere Leistungen</h2>

Beratungstechnicken

  • Konsistente Sprache: gleiche Begriffe für gleiche Funktionen („Anmelden“ vs. „Login“ vermeiden).

  • Kurz, aber präzise: Labels sollen nicht überladen, aber eindeutig sein.

  • Hilfetexte ergänzen: mit aria-describedby oder unterhalb von Feldern.

  • Visuelle und semantische Konsistenz: Überschriften auch optisch als solche erkennbar machen.

  • Vermeide Abkürzungen, die nicht allgemein verständlich sind.

Fehler

  • Überschriften nur für Design genutzt, nicht für Struktur.
  • Labels fehlen oder sind nicht mit Inputs verknüpft.
  • Gleiche Buttons auf einer Seite heißen „Mehr“ – ohne Kontext.
  • Placeholder als Ersatz für Label → verschwindet beim Tippen.
  • Inkonsistente Begriffe („Zur Kasse“ auf einer Seite, „Bezahlen“ auf einer anderen).