Die Formularbeschriftung ist die sichtbare Beschriftung eines Eingabefelds, die technisch mit ihm verbunden ist. Ohne diese Verbindung weiß ein Hilfsmittel nicht, wofür das Feld da ist.
- Formularbeschriftung (Label-Zuordnung)
Die sichtbare Beschriftung eines Eingabefelds, technisch mit ihm verbunden.
Beispiel: „Die Formularbeschriftung ‚E-Mail-Adresse‘ gehört über das Feld und nicht in den Platzhalter.“Auch: Label, Feldbeschriftung, Label-Zuordnung. Die Zuordnung entsteht über das for-Attribut der Beschriftung und die id des Feldes.
Abgrenzung zum Platzhalter: Der ist ein Beispiel für den Inhalt und verschwindet beim Tippen. Als Beschriftung taugt er nicht, weil die Angabe genau dann fehlt, wenn geprüft wird, was man eingetragen hat.
Abgrenzung zum aria-label: Das liefert einen Namen für Hilfsmittel, ist aber unsichtbar. Für sehende Nutzer bleibt das Feld unbeschriftet, und die Sprachsteuerung findet es nicht.
Wie die Zuordnung aussieht
Über zwei zusammengehörige Attribute. Die Beschriftung verweist mit for auf die id des Feldes; damit ist sie technisch verbunden, und ein Klick auf den Text setzt den Fokus ins Feld.
<label for="mail">E-Mail-Adresse</label>
<input type="email" id="mail" name="mail" autocomplete="email">Was die WCAG verlangt
Erfolgskriterium 3.3.2 „Labels or Instructions“ verlangt auf Stufe A schlicht: Wo Inhalt eine Eingabe verlangt, gibt es Beschriftungen oder Anweisungen. Dazu kommen 1.3.1 für die technische Zuordnung und 4.1.2, das für jedes Bedienelement einen ermittelbaren Namen verlangt.
Drei Kriterien für eine Zeile Markup, und trotzdem ist die fehlende Beschriftung einer der häufigsten Befunde überhaupt. Sie lässt sich maschinell finden, was sie zu einem der ersten Punkte in jedem Prüfbericht macht.
Was dazugehört
Die Beschriftung bleibt sichtbar, steht über oder vor dem Feld und nennt die Sache beim Namen. Pflichtfelder werden im Text gekennzeichnet und nicht allein mit einem Sternchen, dessen Bedeutung irgendwo erklärt ist.
Aus unserer Arbeit an über 2.500 Website-Projekten lohnt sich dabei ein zweiter Blick auf das Attribut autocomplete. Es erlaubt dem Browser, bekannte Angaben einzusetzen, und spart genau den Menschen Arbeit, denen das Tippen schwerfällt.