2️⃣ 2.5.3 - Beschriftung im Namen
A 2.1
Umsetzung
Ziel
Die sichtbare Beschriftung eines Steuerelements soll mit dessen zugänglichem Namen übereinstimmen, um eine konsistente Bedienung für alle Nutzer zu gewährleisten.
Beschreibung
- Die Reihenfolge der Beschriftung im Namen soll unverändert bleiben.
- Satzzeichen und Groß-/Kleinschreibung können von der sichtbaren Beschriftung abweichen, solange die Bedeutung gleich bleibt.
- Zusatzinformationen können vor oder nach der sichtbaren Beschriftung ergänzt werden, dürfen aber nicht in die Beschriftung eingefügt werden.
Anforderungen
- Beschriftungen sollten eindeutig und präzise sein.
- Platzierung der Beschriftung gemäß Konventionen:
- Links oder oberhalb bei Eingabefeldern.
- Rechts neben Kontrollkästchen oder Optionsfeldern.
- Verwendung von
aria-labeloderaria-labelledby, um die sichtbare Beschriftung als zugänglichen Namen zu definieren. - Vermeidung von Abweichungen zwischen sichtbarer Beschriftung und zugänglichem Namen.
- Sicherstellen, dass Platzhaltertexte nicht als alleinige Beschriftung verwendet werden.
- Nutzung von Techniken wie
aria-describedby, um zusätzliche Kontextinformationen bereitzustellen.
- Präzise und konsistente Formulierung von Beschriftungen.
- Verzicht auf unnötige Zusätze oder Floskeln wie „Mehr zu“ in Beschriftungen.
- Prüfung, ob die sichtbare Beschriftung vollständig im zugänglichen Namen enthalten ist.
- Sicherstellen, dass Beschriftungen leicht verständlich und eindeutig sind.
- Validierung der technischen Umsetzung mit Tools wie Qualweb oder manueller Quellcodeprüfung.
Code-Beispiele
Beschriftung und Name stimmen überein:
<button aria-label="Senden">Senden</button>Platzhaltertext als Beschriftung verwenden:
<input placeholder="E-Mail-Adresse" aria-label="E-Mail-Adresse">