Das Prüfverfahren zur BITV


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


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?

Die Beschriftung von Formularelementen soll vor (das heißt links neben oder über) dem zugehörigen Eingabefeld angeordnet werden. Nur die Beschriftung von Checkboxes und Radiobuttons kann (und sollte normalerweise) rechts neben dem zugehörigen Eingabefeld angeordnet werden.

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 Anordnung von Beschriftungen direkt vor oder über dem Eingabefeld entspricht den üblichen Gestaltungskonventionen. Auch in ausschnitthaften Ansichten (etwa in Vergrößerungssoftware) wird schnell klar, welche Beschriftung zu welchem Feld gehört.

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)

2.4. Fehlermeldungen oder Eingabehilfen programmatisch ermittelbar?

  • Prüfen, ob Fehlermeldungen oder Eingabehilfen, die nahe am Formularfeld positioniert sind, aber nicht Teil des Labels sind, mit aria-describedby oder aria-labelledby verknüpft sind.

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, oderein 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 2.4.6a "Aussagekräftige Überschriften und Beschriftungen" geprüft.

Einordnung des Prüfschritts nach WCAG 2.0

Guidelines

Success criteria

Techniques

General Techniques
HTML Techniques
ARIA Techniques
Failures

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