Überschriften und Beschriftungen
Überschriften und Formularbeschriftungen müssen das Thema oder den Zweck des Inhalts beschreiben, den sie einleiten. Sie müssen nicht eindeutig sein, aber sie müssen informativ sein — eine Überschrift wie „Information“ oder eine Beschriftung wie „Feld“ erfüllt dieses Erfolgskriterium nicht.
Was gefordert wird
Wenn ein Abschnitt eine Überschrift hat oder ein Formularelement eine Beschriftung besitzt, muss der Text tatsächlich beschreiben, was folgt. Screenreader-Nutzende verwenden Überschriften und Beschriftungen als Inhaltsverzeichnis der Seite — JAWS-Nutzende drücken H, um von Überschrift zu Überschrift zu springen, und der Formularmodus liest Beschriftungen laut vor, sobald ein Feld den Fokus erhält. Vage Texte zerstören dieses gesamte Navigationsmodell.
Das Erfolgskriterium verlangt nicht, dass überall Überschriften vorhanden sind, sondern nur, dass vorhandene Überschriften beschreibend sind. (Wann Überschriften erforderlich sind, regelt 2.4.10 auf AAA-Stufe.)
So wird die Anforderung erfüllt
- Überschriften so formulieren, dass sie den Abschnitt benennen, nicht die gestalterische Absicht:
„Lieferadresse“statt„Abschnitt 2“,„Häufig gestellte Fragen“statt„Mehr Infos“. - Jedes Formularelement mit einem sichtbaren
<label>versehen, dessen Text das Eingabefeld beschreibt. Platzhaltertext als Beschriftung ist zu vermeiden, da er beim Tippen verschwindet. - Bei visuell verborgenen Beschriftungen (Suchfeld, Symbolschaltflächen)
aria-labeloder eine.visually-hidden-Klasse verwenden, aber die Beschriftung konkret halten. - Wenn zwei Überschriften auf einer Seite dasselbe Thema abdecken (z. B. zwei „Kommentare“-Abschnitte auf einem Forumsindex), durch Kontext unterscheiden:
„Kommentare vom 14. Juli“,„Kommentare vom 15. Juli“. - Jede Überschrift oder Beschriftung mit drei Wörtern oder weniger überprüfen — dort konzentriert sich Vagheit am häufigsten.
Häufige Fehler
- „Information“, „Details“, „Mehr“, „Abschnitt“, „Formular“ als Überschriften ohne weiteren Kontext.
- Formularbeschriftungen wie „Feld 1“, „Eingabe“, „Hier eingeben“ oder gar keine Beschriftung (nur Platzhaltertext).
- Kachelraster-Überschriften, die alle „Mehr erfahren“ lauten, weil sie durch eine Vorlagenänderung aus CTAs entstanden sind.
- Suchergebnisseiten, auf denen jede Ergebnisüberschrift schlicht „Ergebnis“ lautet.
- Tabellen, deren Spaltenköpfe „Sp. 1“, „Sp. 2“ statt „Datum“, „Betrag“, „Status“ heißen.
Warum es wichtig ist
In den WebAIM-Screenreader-Nutzungserhebungen ist das Navigieren per Überschriften durchgängig die häufigste Strategie, um sich auf einer neuen Seite zu orientieren — häufiger als das sequenzielle Lesen von oben nach unten. Vage Überschriften lassen diese Karte kollabieren. Vage Beschriftungen lassen Formulare scheitern: Eine Person gelangt zu einem Feld, das nur „Eingabe“ lautet, und muss zurücknavigieren, um den umgebenden Text zu lesen — den der Formularmodus häufig ausblendet.