Barrierefreie Formulare
Ein barrierefreies Formular verknüpft jedes Feld eindeutig mit einer sichtbaren Beschriftung, ist vollständig per Tastatur bedienbar und teilt Fehler so mit, dass sie auch ohne visuelle Wahrnehmung auffindbar und verständlich sind.
Kurz erklärt
Ein Formularfeld braucht eine programmatisch zugeordnete Beschriftung - erreicht über ein <label for="feld-id">, das per for-Attribut mit der id des Eingabefelds verknüpft ist, oder alternativ durch Verschachtelung des Feldes im Label. Erst diese Verknüpfung erlaubt es Screenreadern, beim Fokussieren des Feldes die zugehörige Bezeichnung vorzulesen. Darüber hinaus gehören zu einem barrierefreien Formular: klar erkennbare Pflichtfelder, sinnvolle Gruppierung zusammengehöriger Felder (etwa über <fieldset> und <legend>), eine Fehlerausgabe, die dem betroffenen Feld eindeutig zugeordnet ist, und eine vollständige Bedienbarkeit ohne Maus.
Beispiel
<label for="email">E-Mail-Adresse</label>
<input type="email" id="email" name="email" required aria-describedby="email-error">
<p id="email-error" role="alert">Bitte geben Sie eine gültige E-Mail-Adresse ein.</p>Das aria-describedby-Attribut verknüpft das Feld zusätzlich mit der Fehlermeldung, sodass ein Screenreader sie beim Fokussieren des Feldes mit vorliest - unabhängig davon, ob der Nutzer die Meldung visuell wahrnimmt.
Warum ist das relevant?
Formulare sind der Abschnitt einer Website, an dem Barrieren am unmittelbarsten zu einem Geschäftsverlust führen: Ein Warenkorb, eine Registrierung oder ein Checkout, der sich nicht per Tastatur oder Screenreader bedienen lässt, verhindert den Kaufabschluss vollständig, statt nur einzelne Inhalte unzugänglich zu machen. Formulare gehören deshalb zu den am häufigsten geprüften Bereichen in BFSG-relevanten Audits von Online-Shops.
Häufige Missverständnisse
Ein Placeholder-Text im Eingabefeld ersetzt kein Label - er verschwindet, sobald Text eingegeben wird, wodurch die Beschriftung für sehende Nutzer verloren geht, und wird zudem nicht von allen Screenreadern als Beschriftung erkannt. Ebenso reicht es nicht, eine Fehlermeldung nur farblich (etwa rot eingefärbter Rahmen) zu kennzeichnen - ohne Text oder Icon ist sie für farbenblinde Nutzer nicht erkennbar, und ohne programmatische Verknüpfung bleibt sie für Screenreader-Nutzer unsichtbar. Auch ein rein visuell als Pflichtfeld markiertes * ohne zusätzlichen Text oder aria-required wird von Screenreadern häufig nicht vorgelesen.
Weiterführende Inhalte
Aus der Praxis
Der Fehler, der in Audits am häufigsten auftaucht, ist nicht das fehlende `<label>`, sondern ein Placeholder, der ein Label ersetzen soll - er verschwindet, sobald das Feld ausgefüllt wird, und wird von vielen Screenreadern gar nicht als Beschriftung vorgelesen.