| 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. |
Beschriftungen sollen über Markup mit den Formularelementen, die sie beschriften, verknüpft sein.
Bei label-Elementen geschieht das über das for-Attribut oder den Einschluss des beschrifteten Formularelements in das label-Element. Sind Beschriftungen nicht mit dem label-Element ausgezeichnet, soll eine Beschriftung des zugehörigen Formularelements auf anderem Weg (etwa über das aria-labelledby-Attribut) sichergestellt sein.
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).
Visuell voneinander abgesetzte oder logisch miteinander verbundene Gruppen von Formularelementen sollten mit fieldset oder mithilfe von Überschriften sinnvoll strukturiert sein.
Die Verknüpfung von Beschriftungen mit den zugeordneten Eingabefeldern stellt sicher, dass der Aufbau einer Seite unabhängig von der Präsentation festgelegt und zugänglich ist:
label-Elemente: Mausnutzer können durch einen Klick auf das Label den Fokus auf das zugeordnete Formularelement setzen.aria-labelledby verknüpft sind oder ein Name für das Formular-Element auf andere Weise programmatisch bereitgestellt wirdfieldset oder Überschriften sinnvoll strukturiert sind.legend-Element eines fieldset oder über eine ausreichend unterstützte Alternative (etwa role="group") ausgezeichnet ist.select) voneinander abgesetzte Gruppen von Optionen enthalten, sind diese mit optgroup ausgezeichnet (mit der Web Developer Toolbar > Informationen > Elementinformationen einblenden > Kindelemente überprüfen)fieldset / legend)Auch wenn die Beschriftungen (Labels) der Formularelemente korrekt ausgezeichnet sind, kann es sein, dass diese für sich genommen nicht ausreichen und z.B. eine gemeinsame Überschrift (legend-Element eines fieldset) für das Verständnis notwendig ist - etwa bei Radio-Inputs mit den Labels "Ja" / "Nein" oder bei Adressen, bei denen es unklar ist, ob es sich um eine Rechnungs- oder eine Versandadresse handelt.
Bei kombinierten Formular-Elementen 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 werden.
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 sichtbar nebeneinander (und im Quellcode nacheinander) positioniert sind, das Eingabefeld eine Textvorbelegung hat oder die Beschriftung des Buttons die Funktion eindeutig kennzeichnet (etwa "Suchen" oder Lupen-Icon mit aussagekräftigem Alternativtext). Das unbeschriftete Eingabefeld mit Textvorbelegung muss in solchen Fällen entweder ein aussagekräftiges title-Attribut, ein verküpftes verstecktes Label oder ein aria-label-Attriut haben, da für Screenreader-Nutzer der nachfolgende Button nicht gleichermaßen als Beschriftung taugt.
Sichtbare zusätzliche erklärende Beschriftungen sollten über aria-describedby mit betreffenden Formular-Element verknüpft sein.
aria-label oder title) nicht programmatisch ermittelbar.fieldset/legend oder role="group" mit Verknüpfung der Gruppenüberschrift über aria-labelledby).aria-describedby).optgroup.