2.4.6 Überschriften und Beschriftungen (Labels)

/ Woran Seiten scheitern

• Jeder Abschnitt einer Leistungsseite hat die Überschrift „Mehr erfahren“ oder „Überblick“, die Liste der Überschriften besteht also immer wieder aus denselben zwei Wendungen.
• Ein Bestellformular hat zwei Felder mit der Beschriftung „Adresse“, eines für die Rechnung und eines für die Lieferung, und keine der beiden Beschriftungen sagt, welches welches ist.
• Eine Platzhalter-Überschrift aus der Vorlage, etwa „Abschnittstitel“, ist über echtem Inhalt live gegangen.
• Die Schaltflächen in jeder Tabellenzeile heißen „Los“ und „Absenden“, ohne ein Wort dazu, was sie mit der Zeile tun.
• Nach einem Relaunch steht die Überschrift „Preise“ über einem Block mit Kundenstimmen, während die Preise in einen anderen Abschnitt gewandert sind.

/ So prüfen Sie es selbst

1. Öffnen Sie die Gliederung der Überschriften mit einer kostenlosen Browsererweiterung wie HeadingsMap oder die Überschriftenliste eines Screenreaders (in NVDA Einfügen+F7). Lesen Sie nur die Überschriften und prüfen Sie, ob jede sagt, was ihr Abschnitt enthält.
2. Vergleichen Sie jede Überschrift mit dem Inhalt darunter. Eine Überschrift, die aus einer Vorlage oder einem früheren Layout übrig ist, scheitert, auch wenn sie gut formuliert ist.
3. Lesen Sie jede sichtbare Feldbeschriftung für sich und fragen Sie, ob sie sagt, was einzutragen ist. Achten Sie besonders auf Paare, die man verwechseln kann, etwa zwei Adress- oder zwei Datumsfelder.
4. Prüfen Sie Schaltflächen und Symbol-Bedienelemente. Ihr sichtbarer Text oder ihr Symbol sollte sagen, was geschieht, und ein Symbol, das die einzige Beschriftung ist, sollte an dieser Stelle allgemein bekannt sein.
5. Wo sich dieselbe Überschrift auf einer Seite wiederholt, etwa „Technische Daten“ unter mehreren Produkten, prüfen Sie, ob die umgebende Struktur jede davon unterscheidbar macht.

/ So beheben Sie es

• Formulieren Sie jede Überschrift so, dass sie ihr Thema nennt, und stellen Sie das unterscheidende Wort an den Anfang: „Hochwasser: Vorsorge“ und „Brand: Vorsorge“ statt „Vorsorge für Hochwasser“ und „Vorsorge für Brände“.
• Lassen Sie jede Beschriftung genau sagen, was ins Feld gehört: „Rechnungsadresse“ und „Lieferadresse“, „Geburtsdatum“ statt „Datum“.
• Benennen Sie Schaltflächen nach dem, was sie tun, etwa „Rechnung löschen“ oder „Bericht herunterladen“, statt „Los“ oder „Absenden“.
• Geben Sie einem Bedienelement, das nur aus einem Symbol besteht, eine Textalternative mit seinem Zweck, etwa aria-label="Suchen" an der Schaltfläche mit der Lupe, und verwenden Sie reine Symbol-Beschriftungen nur für allgemein verstandene Zeichen.
• Prüfen Sie die Überschriften jedes Mal, wenn Inhalt verschoben oder eine Vorlage wiederverwendet wird, und durchsuchen Sie den Build vor der Veröffentlichung nach Platzhaltertext wie „Lorem ipsum“ oder „Abschnittstitel“.

/ Was unser Scanner prüft

Keine automatische Prüfung in unserem Scan entscheidet dieses Kriterium, denn ob eine Überschrift ihren Abschnitt beschreibt, muss man lesen. Verwandte Fehler werden anderswo gemeldet: eine übersprungene Überschriftenebene und ein fehlendes h1 unter 1.3.1, ein Feld ohne Beschriftung unter 1.3.1, ein Bedienelement ohne zugänglichen Namen unter 4.1.2. Der HTML_CodeSniffer-Test für 2.4.6 gibt nur einen Hinweis aus, den der Scan verwirft. Überschriften und Beschriftungen liest ein Mensch in der manuellen Prüfung.