Das Prüfverfahren zur BITV


Sie sind hier: BITV-Test > Liste der Erfolgskriterien > Prüfkriterium 1.3.1h (6 von 60)


zum WCAG-Test wechseln


Blättern: zum ersten Prüfschritt zum vorhergehenden Prüfschritt zum nächsten Prüfschritt zum letzten Prüfschritt

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 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.

Warum wird das geprüft?

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:

  • Der Screenreader liest die Beschriftungen vor, wenn der Benutzer durch die Formularelemente wandert.
  • Ein Vorteil der Nutzung nativer label-Elemente: Mausnutzer können durch einen Klick auf das Label den Fokus auf das zugeordnete Formularelement setzen.

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 Beschriftungen und Formular-Elemente verküpft?

  1. Mit der Maus auf die Beschriftung von Formular-Elementen klicken und prüfen, ob der Cursor dadurch auf das Formular-Element gesetzt wird.
  2. Ist das nicht der Fall, prüfen, ob Beschriftung und Formular-Element mit aria-labelledby verknüpft sind oder ein Name für das Formular-Element auf andere Weise programmatisch bereitgestellt wird

2.2. Prüfung von Gruppen von Formular-Elementen

  1. Prüfen, ob visuell voneinander abgesetzte oder logisch miteinander verbundene Gruppen von Formular-Elementen mithilfe fieldset oder Überschriften sinnvoll strukturiert sind.
  2. Falls eine Gruppenbeschriftung für das Verständnis der Beschriftung der einzelnen Formularelemente nötig sind, prüfen, ob die Gruppenbeschriftung mit dem legend-Element eines fieldset oder über eine ausreichend unterstützte Alternative (etwa role="group") 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

3.1 Ergänzende Beschriftungen (etwa über 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.

3.2 Kombinierte Formular-Elemente (etwa bei Datumseingabe)

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.

3.3 Suchfeld mit nachfolgenem Button bzw. Input

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.

3.4 Zusätzliche Beschriftungen

Sichtbare zusätzliche erklärende Beschriftungen sollten über aria-describedby mit betreffenden Formular-Element verknüpft sein.

4. Bewertung

Nicht erfüllt

  • Beschriftungen sind nicht korrekt mit den dazugehörigen Eingabefeldern verknüpft und ein zugänglicher Name ist auch auf andere Weise (etwa über aria-label oder title) nicht programmatisch ermittelbar.

Nicht voll erfüllt

  • Zur Unterscheidung notwendige Gruppenbeschriftungen sind vorhanden, aber nicht programmatisch ermittelbar (etwa über fieldset/legend oder role="group" mit Verknüpfung der Gruppenüberschrift über aria-labelledby).
  • Zum Verständnis wichtige zusätzliche Beschriftungen sind nicht programmatisch ermittelbar (etwa durch Verknüpfung über aria-describedby).
  • 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üfschritten

  • Ob die Beschriftungen von Formular-Elementen (auch bei Nutzung von Gruppenüberschriften als Ergänzung der unmittelbaren Beschriftungen) hinreichend aussagekräftig sind, wird in Prüfschritt 2.4.6a "Aussagekräftige Überschriften und Beschriftungen" geprüft. Hier geht es um die programmatische Ermittelbarkeit.
  • Ob die sichtbare Beschriftung überhaupt vorhanden ist, wird in Prüfschritt 3.3.2a "Beschriftungen von Formularelementen vorhanden" geprüft.
  • Ob die sichtbare Beschriftung im zugänglichen Namen des Formularelements vorkommt, wird in Prüfschritt 2.5.3a "Sichtbare Beschriftung Teil des zugänglichen Namens" geprüft.

Einordnung des Prüfschritts nach WCAG 2.1

Guidelines

Success criteria

Techniques

General Techniques
HTML Techniques
ARIA Techniques
Failures

Quellen

W3C Web Accessibility Tutorials: Forms

Blättern: zum ersten Prüfschritt zum vorhergehenden Prüfschritt zum nächsten Prüfschritt zum letzten Prüfschritt