Prüfschritt 9.1.3.1h Beschriftung von Formularelementen programmatisch ermittelbar

2.1 Sind Beschriftungen und Formular-Elemente verknüpft?

Mit der Maus auf die Beschriftung von Formular-Elementen klicken und prüfen, ob der Cursor dadurch auf das Formular-Element gesetzt wird. 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

Prüfen, ob visuell voneinander abgesetzte oder logisch miteinander verbundene Gruppen von Formular-Elementen mithilfe fieldset oder Überschriften sinnvoll strukturiert sind. 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.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 nachfolgendem 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 verknüpftes verstecktes Label oder ein aria-label-Attribut 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-Elementen verknüpft sein.

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.

Guidelines

• Guideline 1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure.

Success criterion

• 1.3.1 Info and Relationships (Level A)

Techniques