Prüfschritt 1.3.1h
Beschriftung von Formularelementen programmatisch ermittelbar
Technische Angaben
| Version |
Aktuell |
| BITV-Bedingung |
1.3.1 Informationen und Beziehungen |
| WCAG-Erfolgskriterium |
1.3.1 Info und Beziehungen |
| Bewertungsalternativen |
ja / eher erfüllt / teilweise erfüllt / eher nicht erfüllt / nein / nicht anwendbar |
| Gewichtung |
hohes Gewicht (3 Punkte) |
| Bezieht sich auf |
einzelne Webseite |
| Prüfschritt erfüllt |
Beschriftungen von Formularfeldern sind richtig verknüpft. |
Was wird geprüft?
Beschriftungen (label-Elemente) sollen über das entsprechende Markup (das for-Attribut) mit den Eingabefeldern verknüpft sein, zu denen sie gehören.
Visuell voneinander abgesetzte oder logisch miteinander verbundene Gruppen von Formularelementen sind mit fieldset oder mithilfe von Überschriften sinnvoll strukturiert.
Ist bei Gruppen von Formularelementen eine Gruppenbeschriftung für das Verständnis der Beschriftung der einzelnen Formularelemente nötig, sollte die Verfügbarkeit sichergestellt werden (z.B. mit Hilfe von fieldset mit legend).
Warum wird das geprüft?
Die Verknüpfung von Beschriftungen mit den zugeordneten Eingabefeldern durch das label-Element stellt sicher, dass der Aufbau einer Seite unabhängig von der Präsentation festgelegt und zugänglich ist:
- Der Screenreader liest die Beschriftungen vor, wenn der Benutzer durch die Formularelemente wandert.
- Mausnutzer können durch einen Klick auf das Label den Fokus das zugeordnete Formularelement setzen.
- Das jeweils aktive Label kann deutlich hervorgehoben werden.
Auch wenn die Beschriftungen (Labels) der Formularelemente korrekt ausgezeichnet sind so kann es sein, dass diese nicht ausreichen und z.B. eine gemeinsame Überschrift (legend) für das Verständnis notwendig ist.
Wie wird geprüft?
1. Anwendbarkeit des Prüfschritts
- Der Prüfschritt ist anwendbar, wenn die Seite Formularelemente enthält.
2. Prüfung
2.1. Sind Label und Formularelemente verküpft?
- Mit der Maus auf die Beschriftung von Formular-Elementen (Label) klicken und prüfen, ob der Cursor dadurch in das Eingabefeld springt.
- Springt der Cursor nicht in das Eingabefeld, prüfen, ob Label und Formularfeld mit
aria-labelledby verknüpft sind.
2.2. Prüfung von Grupen von Formularelementen
- Prüfen, ob visuell voneinander abgesetzte oder logisch miteinander verbundene Gruppen von Formularelementen mit fieldset oder mithilfe von Überschriften sinnvoll strukturiert sind.
- Falls Gruppenbeschriftung für das Verständnis der Beschriftung der einzelnen Formularelemente nötig sind, prüfen ob die Gruppenbeschriftung mit
legend ausgezeichnet ist.
2.3. Gliederung von Auswahllisten
- Wenn Auswahllisten (
select) voneinander abgesetzte Gruppen von Optionen enthalten, sind diese mit optgroup ausgezeichnet (mit der Web Developer Toolbar > Informationen > Elementinformationen einblenden > Kindelemente überprüfen)
3. Hinweise
- Bei kombinierten Eingabeelementen hat nicht immer jedes Element eine zugeordnete Beschriftung. In diesem Fall sollen Elemente mit einem erklärenden title-Attribut versehen werden. Beispiel: In einem Formular werden für die Eingabe eines Datums drei Auswahllisten angeboten (Tag, Monat und Jahr). Die drei Auswahllisten haben eine gemeinsame Beschriftung: Datum. Die Auswahllisten für Tag, Monat und Jahr sind mit einem erklärenden
title-Attribut versehen. Alternativ kann in diesem Fall die Beschriftung auch mit Hilfe von aria-label oder aria-labelledby zur Verfügung gestellt weren.
- Wenn ein einfaches Suchformular nur aus einem Eingabefeld und einem Button besteht, ist oftmals keine sichtbare Beschriftung notwendig. Hier ist es ausreichend, wenn Eingabefeld und Button direkt nebeneinander positioniert sind, das Eingabefeld eine sinnvolle Textvorbelegung hat oder die Beschriftung des Buttons die Funktion eindeutig kennzeichet (etwa "Suchen"). Das unbeschriftete Eingabefeld mit Textvorbelegung muss in solchen Fällen entweder ein aussagekräftiges title-Attribut, ein verstecktes Label oder ein
aria-label bzw. aria-labelledby haben, da für Screenreader-Nutzer der nachfolgende Button nicht gleichermaßen als Beschriftung taugt.
4. Bewertung
Nicht erfüllt
- Beschriftungen sind nicht korrekt mit den dazugehörigen Eingabefeldern verknüpft.
Nicht voll erfüllt
- Hierarchische Auswahllisten sind mit Dummy-Einträgen oder Einrückung durch Leerzeichen oder Bindestriche gegliedert statt mit optgroup.
Einordnung des Prüfschritts
Formulierung BITV 2.0
1.3.1 Informationen und Beziehungen
Alle Informationen, Strukturen und Beziehungen, die durch Layout und Präsentation vermittelt werden, sind durch Programme erkennbar oder im Text verfügbar.
Abgrenzung von anderen Prüfkriterien
Ob bei Nutzung von fieldset mit legend der legend-Inhalt zusammen mit verknüpften Beschriftungen der Formularfelder (label) Sinn macht, wird in Prüfschritt 1 "Aussagekräftige Überschriften und Beschriftungen" geprüft.
Einordnung des Prüfschritts nach WCAG 2.1
Guidelines
Success criteria
Techniques
General Techniques
HTML Techniques
ARIA Techniques
Failures
