Beschriftungen/Labels sind in der digitalen Barrierefreiheit ein uraltes Thema, das aber im Vergleich etwa zu Überschriften oder Alternativtexten oft unterschätzt wird.
Generell geht es hier nur um die Beschriftung von aktivierbaren Elementen, also UI-Elemente, nicht um die Beschriftung von Bereichen wie Landmarks oder Alternativtexte für Bilder.
Forderungen der WCAG
Tatsächlich hat die WCAG selbst relativ wenige Vorgaben zum Thema Beschriftungen.
- 1.3.1: Info and Relationships
- 2.4.6: Headings and Labels
- 2.5.3: Label in Name
- 3.3.2: Labels or Instructions
Im WAI-Dokument Accessible Name and Description Computatio n wird definiert, nach welcher Abfolge barrierefreie Beschriftungen ermittelt werden. Das ist notwendig, da es einige Wege gibt, eine Beschriftung festzulegen.
Möglichkeiten der Beschriftung
Der Accessible Name wird aus bestimmten Attributen oder sichtbarem Text ermittelt – in einer klaren Priorität. Das ist die Reihenfolge der Namensberechnung (stark vereinfacht)
Für HTML-Elemente (z. B. button, input, img, etc.):
1. aria-labelledby
• Holt den Namen aus einem anderen Element per ID.
• → Überschreibt alles andere.
2. aria-label
• Ein expliziter Name, direkt als Attribut angegeben.
• → Überschreibt sichtbaren Text, aber nicht aria-labelledby.
3. Elementeigener Textinhalt (sichtbarer Text)
• Z. B. der Text innerhalb eines button oder label
• Wird verwendet, wenn aria–Attribute nicht gesetzt sind.
4. alt-Attribut (nur bei img)
• Wird als Name verwendet, wenn vorhanden.
5. title-Attribut
• Nur verwendet, wenn nichts anderes verfügbar ist.
6. label for=“…“ oder umschließendes label bei input
• Gilt als „sichtbarer“ Name für Formularelemente
7. ARIA described by als Ergänzung
ARIA described by wird nur als Ergänzung, nicht als Beschriftung von Elementen verwendet. Zum Beispiel werden eingeblendete Fehlermeldungen zu falsch ausgefüllten Formularfeldern per ARIA describedd by mit dem Formularfeld verkünpft. Damit können Screenreader zwischen der Beschriftung und der ehlermeldung sauber unterscheiden.
Placeholder-Texte zählen in diesem Kontext nicht als barrierefreie Beschriftung.
Nachdem Motto zuerst HTML, ARIA nur wenn nötig sollten implizite oder explizite Labels bevorzugt für die Beschriftung von HTML-Form-Elementen verwendet werden. Danach folgt ARIA Labeled by, um eine Beziehung zwischen Beschriftung und beschriftetem Element herzustellen. ARIA Label hat den Nachteil, dass es nicht automatisch angepasst wird, falls die visuelle Beschriftung geändert wird. ARIA Label sollte nur verwendet werden, wenn ein uI-Element keine visuelle Beschriftung hat, zum Beispiel für ein Burger-Menü oder einen Share-Button, der nur aus einem Icon besteht.
Häufige Fehler
1. Gleiche Beschriftung, unterschiedliche Kontexte
Ein Beispiel ist eine Website, die zwei Such-Funktionen enthält, eine für die Website, eine für eine Datenbank. Die Suche-Beschriftungen sollten eindeutig gestaltet werden, damit sie nicht verwechselt werden.
2. Gleicher Zweck, verschiedene Beschriftungen
Eine Funktion erfüllt den gleichen zweck, wurde aber unterschiedlich beschriftet. Das ist mir in der Praxis allerdings noch nicht untergekommen.
3. Zu lange Beschriftungen
Lange Beschriftungen liegen in jedem Fall dann vor, wenn visuelle Beschriftungen wohlmeinend zusätzlich ergänzt werden. Beispiel: Die visuelle Beschriftung ist „Senden“, die maschinen-lesbare Beschriftung ist „Klicken Sie hier, um das Formular abzusenden“. Anders sieht die Situation aus, wenn Beschriftungen aus Gruppen-Beschriftungen wie Fieldset/Legend oder ARIA labeled by generiert werden, hier folgt man dem Standard, kann aber trotzdem eher verwirren als zu helfen. Für diesen Fall gibt es leider keine einfache Lösung.
4. Unterschied zwischen Visueller und maschinen-lesbarer Beschriftung
WCAG 2.5.3: Label in Name fordert, dass die visuelle Beschriftung Teil des maschinen-lesbaren Namens ist. Wenn die visuelle Beschriftung“Vorname“ lautet, dürfte die maschinenlesbareBeschriftung nicht „Given Name“ lauten, weil die Zeichenkette „Vorname“ darin nicht vorkäme. 2.5.3 richtet sich vor allem an Verwenderinnen von Sprachsteuerung. Der Sprachbefehl „Gehe zu Eingabefeld Vorname“ würde in dem Beispiel nicht funktionieren, weil die maschinen-lesbare Beschriftung nicht „Vorname“ enthält. Eine maschinenlesbare Beschrirftung wie „Vorname/Given Name“ wäre aber erlaubt.
Tipps für zugängliche Beschriftungen
- Ist die visuelle Beschriftung in der maschinen-lesbaren Beschriftung enthalten?
- Schauen Sie sich einmal nur die Beschriftungen an, die Sie in Ihrer Applikation verwenden. Gibt es mehrfach vorkommende Beschriftungen wie „Suche“, die aber unterschiedliche Zwecke erfüllen?
- Sind Beschriftungen aus sich selbst heraus bzw. aus dem Kontext heraus verständlich oder ist es sinnvoll, mit ARIA described by einen zusätzlichen Bezug herzustellen?
- Sind Beschriftungen bzw. Gruppierungs-Beschriftungen oder ARIA-labeled-By-Beschriftungen zu lang?