Was Formularfelder brauchen
Jedes Formularfeld braucht eine sichtbare Beschriftung, die im Code mit dem Feld verbunden ist. Felder für persönliche Angaben bekommen zusätzlich autocomplete, damit der Browser sie ausfüllen kann.
So funktioniert es
Eine Beschriftung, im Code label, sagt, was in ein Feld gehört. Sie ist mit dem Feld verbunden, wenn ihr Attribut for auf die id des Felds zeigt. Dann liest der Screenreader beim Feld „E-Mail, Eingabefeld“ vor, und ein Klick auf die Beschriftung setzt den Cursor ins Feld. Fehlt die Verbindung, hört man nur „Eingabefeld“.
Das Attribut autocomplete sagt dem Browser, welche Angabe ein Feld erwartet: email, tel, given-name (Vorname), family-name (Nachname), street-address, postal-code, address-level2 (Ort). Der Browser füllt diese Felder dann aus gespeicherten Daten. Das spart allen Tipparbeit und hilft besonders Menschen mit motorischen oder kognitiven Einschränkungen.
<label for="email">E-Mail</label>
<input id="email" type="email" name="email" autocomplete="email">WCAG 2.2 verlangt Beschriftungen in Kriterium 3.3.2 und ihre Verbindung im Code in 1.3.1 und 4.1.2; autocomplete für Angaben zur eigenen Person verlangt 1.3.5.
Worauf es ankommt
- Jedes Feld hat ein label. Auch Suchfeld, Newsletter-Feld und Auswahllisten (
select). Ein label, das das Feld umschließt, funktioniert ebenfalls. - Der Platzhalter ersetzt das label nicht. Text im Feld (
placeholder) verschwindet beim Tippen, ist oft zu blass und wird nicht überall vorgelesen. Er darf ein Beispiel zeigen, die Beschriftung gehört davor. - Die id ist eindeutig. Ein label trifft nur das erste Element mit dieser id. Steht ein Formular zweimal auf der Seite, brauchen die Felder verschiedene ids (siehe ARIA-Verweise).
- Ohne sichtbares label nur im Ausnahmefall. Wo der Zusammenhang eindeutig ist, etwa ein Suchfeld mit Lupen-Button, reicht ein
aria-label. Sehende profitieren trotzdem von einer sichtbaren Beschriftung. - Gültige autocomplete-Werte. Nur die Namen aus dem HTML-Standard zählen. Ein erfundener Wert wie
autocomplete="vorname"hilft nicht,autocomplete="off"bei Name und Adresse nimmt die Hilfe weg. - Passende Feldtypen.
type="email"undtype="tel"öffnen auf dem Smartphone die passende Tastatur.
So richtest du es ein
Formulare entstehen meist in einem Formular-Plugin oder Baukasten. Dort gibt es je Feld eine Einstellung für die Beschriftung; stell sie auf sichtbar, statt sie zu verbergen oder nur einen Platzhalter zu setzen. Für autocomplete haben viele Plugins ein Feld in den erweiterten Optionen, sonst ergänzt es, wer die Vorlage pflegt. Formulare von Newsletter- oder Buchungsdiensten passt du in deren Formular-Editor an.