2️⃣ 2.5.3 - Beschriftung im Namen
A 2.1
Umsetzung
Die sichtbare Beschriftung eines Steuerelements soll mit dessen zugänglichem Namen übereinstimmen, um eine konsistente Bedienung für alle Nutzer zu gewährleisten.
Beschreibung
Abschnitt betitelt „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
Abschnitt betitelt „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
Abschnitt betitelt „Code-Beispiele“Beschriftung und Name stimmen überein:
Abschnitt betitelt „Beschriftung und Name stimmen überein:“<button aria-label="Senden">Senden</button>Platzhaltertext als Beschriftung verwenden:
Abschnitt betitelt „Platzhaltertext als Beschriftung verwenden:“<input placeholder="E-Mail-Adresse" aria-label="E-Mail-Adresse">