Sie sind hier: BITV-Test > Liste der Erfolgskriterien > Prüfkriterium 3.3.2a (55 von 60)

---

zum WCAG-Test wechseln

Prüfschritt 3.3.2a
Formularfelder richtig beschriftet

Technische Angaben

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.

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

Wie wird geprüft?

1. Anwendbarkeit des Prüfschritts

• Der Prüfschritt ist anwendbar, wenn die Seite Formularelemente enthält.

2. Prüfung

Die Seite im Internet Explorer aufrufen.

2.1. Sind Beschriftungen vorhanden und ausagekräftig?

• Sind alle Formularelemente aussagekräftig beschriftet?
• Sind Pflichtfelder in label- oder legend-Elementen klar angezeigt? Wenn zur Anzeige Symbole wie etwa ein Sternchen (*) genutzt werden, muss deren Bedeutung am Beginn des Formulars erklärt sein.
• Wenn Eingabefelder ein bestimmtes Eingabeformat vorgeben, wird dieses vor dem Eingabefeld klar beschrieben? (Beispiele wären "Format der Datumseingabe: TT.MM.JJJJ" oder "Telefonnummer: Nur Zahlen ohne Leerstellen oder Bindestriche eingeben".)
• Wenn zur Beschriftung fieldset mit legend eingesetzt wird: machen legend und label zusammen vorgelesen bei allen Formularelementen im Fieldset Sinn?

2.2. Sind Beschriftungen richtig positioniert?

1. In der Web Accessibility Toolbar die Funktionen CSS > Disable CSS sowie Tables > Linearize wählen. Falls durch die Verschiebungen des Layouts Texte auf gleichfarbigem Hintergrund dargestellt werden und dadurch nicht mehr sichtbar sind, muss zusätzlich im Menü IE (Pfeiltaste) die Option Internet Explorer Accessibility Options gewählt und die Option "Farbangaben auf Webseiten ignorieren" aktiviert werden.
2. Prüfen, ob die Beschriftung der Eingabefelder klar den Feldern zuzuordnen ist, das heißt, die Beschriftung soll immer direkt über oder vor dem Feld stehen. Die Beschriftung von Checkboxen und Radiobuttons kann (uns sollte in der Regel auch) nach dem Formularelement stehen.

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

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.
• 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 oder ein verstecktes Label haben, da für Screenreader-Nutzer der nachfolgende Button nicht gleichermaßen als Beschriftung taugt.
• Es kann sinnvoll sein, dass bei Formularen Hinweise zum Eingabeformat oder zu ausgelösten Aktionen einmal am Beginn des Formulars stehen statt vor jedem einzelnen Eingabefeld.

4. Bewertung

Nicht erfüllt:

• Wichtige Formularelemente (z.B. die Sucheingabe) sind ohne Beschriftung, auch angrenzende Elemente erklären nicht die Funktion.

Nicht voll erfüllt:

• Beschriftungen sind nicht aussagekräftig, nicht richtig positioniert oder nicht korrekt mit den dazugehörigen Eingabefeldern verknüpft.
• Beschriftungen werden nur als Formularfeld-Vorbelegung bereitgestellt.

Einordnung des Prüfschritts

Formulierung BITV 2.0

3.3.2 Beschriftungen

Für notwendige Eingaben der Nutzerinnen und Nutzer sind Hinweise oder Label (Beschriftungen) zur Verfügung zu stellen.

2.4.6 Beschreibungen

Überschriften und Label (Beschriftungen) kennzeichnen das Thema oder den Zweck.

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.

4.1.1 Syntaxanalyse

Inhalte, die mit Markup-Sprachen erstellt werden, bestehen aus Elementen, für die folgende Eigenschaften gelten:

• Sie verfügen über vollständige Start- und End-Tags,
• sie werden entsprechend ihren Spezifikationen verschachtelt,
• sie enthalten keine doppelten Attribute und
• alle ihre IDs sind eindeutig,

es sei denn, ihre Spezifikationen erlauben diese Besonderheit.

4.1.2 Name, Rolle, Wert

Für alle Komponenten der Benutzerschnittstelle sind Name und Rolle durch Programme erkennbar. Zustände, Eigenschaften und Werte, die von Nutzerinnen und Nutzern eingestellt werden können, können auch durch ein Programm gesetzt werden. Bei Änderungen dieser Zustände, Eigenschaften und Werte erhalten Benutzeragenten, einschließlich assistiver Technologien, eine Mitteilung.

Einordnung des Prüfschritts nach WCAG 2.0

© DIAS GmbH v 4.0| Impressum

nach oben