Was wird geprüft?
Sichtbare Beschriftungen von Formularelementen sind vorhanden.
Die Beschriftung von Formularelementen sollen in der Regel 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. Eine weitere Ausnahme sind Suchfelder, die über ein nachfolgendes konventionelles Symbol (etwa Lupen-Icon) beschriftet sind.
Wenn für die Eingabe ein bestimmtes Format verlangt wird, sollen die Anweisungen für alle Nutzenden lesbar sein.
Warum wird das geprüft?
Wenn sichtbare Beschriftungen zur Verfügung gestellt werden, wissen Nutzende, welche Eingaben erwartet werden. Fehleingaben können so vermieden werden.
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.
Wie wird geprüft?
1. Anwendbarkeit des Prüfschritts
Der Prüfschritt ist anwendbar, wenn die App-Ansicht Formularelemente enthält.
2. Prüfung
App mit zu prüfender Ansicht öffnen.
Sind Beschriftungen vorhanden?
Sind alle Formularelemente beschriftet?
Sind Pflichtfelder in
label- oderlegend-Elementen klar angezeigt? Wenn zur Anzeige Symbole wie etwa ein Sternchen (*) genutzt werden, sollte deren Bedeutung am Beginn des Formulars erklärt sein.Wenn Eingabefelder ein bestimmtes Eingabeformat vorgeben, wird dieses in der Beschriftung klar beschrieben? (Beispiele wären "Format der Datumseingabe: TT.MM.JJJJ" oder "Telefonnummer: Nur Zahlen ohne Leerstellen oder Bindestriche eingeben".)
Sind Beschriftungen richtig positioniert?
3. Hinweise
Eine Textvorbelegung ist keine ausreichende visuelle Beschriftung im Sinne dieses Prüfschritts. Sie verschwindet bei (auch versehentlichen) Nutzereingaben.
Bei kombinierten Eingabeelementen hat nicht immer jedes Element eine zugeordnete Beschriftung. In diesem Fall sollen Elemente mit einem unsichtbaren erklärenden Label versehen werden, welches dann von einem Screenreader ausgegeben werden kann. 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 jeweils mit einem unsichtbaren erklärenden Label für die programmatische Ausgabe an Hilfsmittel versehen.
Wenn ein einfaches Suchformular nur aus einem Eingabefeld und einem grafischen Schalter (etwa ein Lupen-Icon) besteht, ist oftmals keine sichtbare Beschriftung notwendig. Hier ist es ausreichend, wenn Eingabefeld und Schalter direkt nebeneinander positioniert sind. Hinweis: Eingabefelder, die nur über einen nachfolgenden grafischen Schalter beschriftet sind, müssen zudem eine programmatisch verfügbare Beschriftung haben, da für Screenreader-Nutzer der nachfolgende Schalter nicht als Beschriftung ausreicht.
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 nur als Textfeld-Vorbelegung vorhanden.
Quellen
Allgemein
Appt.org: Labels or Instructions: Use input labels (mehrere Entwicklungsumgebungen)
iOS
Orange Accessibility Guidelines: iOS Developer Guide: Element trait
Orange Accessibility Guidelines: iOS Developer Guide: Grouping elements
Android
Orange Accessibility Guidelines: Android develop - Input screen: Explicitly label input fields
Orange Accessibility Guidelines: Group the elements
Appt.org: Input label on Android
Einordnung des Prüfschritts
Abgrenzung von anderen Prüfschritten
In diesem Prüfschritt geht es um sichtbare Beschriftungen. Das Vorhandensein programmatisch ermittelbarer Namen von Formularelementen wird dagegen in Prüfschritt 11.1.3.1d "Info und Beziehungen - Formularelemente" geprüft.