Hier schauen wir uns einmal ein ganz einfaches Kontaktformular – bestehend aus einem Textfeld für den Namen / oder Betreff, einem Textfeld für Email und einem Nachrichtenfeld unter den Gesichtspunkten der Barrierefreiheit an.
<form method="post" name="kontaktformular">
<input type="text" name="name" placeholder="Name">
<input type="email" name="email" placeholder="E-Mail">
<textarea name="message" placeholder="Nachricht"></textarea>
<button type="submit">Senden</button>
</form>
Machen wir nun das einfache Formular Stück für Stück barrierefrei. Um Designaspekte soll es dabei nicht gehen. Wenn man sich das Formular so ansieht, dann scheint es recht einfach und intuitiv zu bedienbar zu sein, doch für Screenreader ist es das nicht. Hier sind die Gründe:
- Screenreader können nicht am Placeholder ablesen / oder ableiten, wofür das Feld gedacht ist. Die Felder haben keinen Namen.
- Tippt man im Feld drauf los, verschwinden die Platzhalter. Viele Screenreader lesen den Platzhalter deswegen gar nicht vor.
- Screenreader können keinen Zusammenhang zwischen Text und Formularfeld erkennen.
- Alle Felder des Formulars sollten Pflichtfelder sein. Per se erkennen das Screenreader allerdings nicht. Glücklicherweise kann man da etwas machen!
Step 1: Formularfelder für Screenreader lesbar machen
Machen wir das Formular nun barrierefrei, indem wir eine Struktur einführen, die das Formular für Screenreader lesbar macht. Dazu fügen wir jedem Feld ein <label> hinzu und verknüpfen mit for=“Zuweisung zu name“ den Text des Labels mit dem Formularfeld.
<form method="post" name="kontaktformular">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Name">
<label for="email">E-Mail</label>
<input type="email" id="email" name="email" placeholder="E-Mail">
<label for="message">Nachricht</label>
<textarea id="message" name="message" placeholder="Nachricht"></textarea>
<button type="submit">Senden</button>
</form>
Erklärung: Wir haben vor jedem Formularfeld (<input>, <textarea>) ein <label> eingefügt – mit dem gleichen Text wie der jeweilige Platzhalter. Damit das Label technisch mit dem entsprechenden Formularfeld verknüpft ist, erhält jedes Feld eine eindeutige id. Diese id wird im zugehörigen Label über das for-Attribut referenziert. Auf diese Weise können Screenreader die Beschriftung korrekt dem Eingabefeld zuordnen.
Darüber hinaus empfehlen wir alle Texte auf Verständlichkeit zu prüfen. Reicht „Senden“ als Buttontext aus? Oder ist „Nachricht absenden“ besser geeignet? Außerdem sollte jedes Formular auch mit Tabulator-Taste einmal getestet werden, ob die Reihenfolge logisch / korrekt ist. Das gilt vor allem bei komplexeren Formularen. In unserem Beispiel ist das nicht so relevant.
Step 2: Formularfelder als Pflichtfelder barrierefrei machen
Um dem Browser zu sagen, dass ein Feld Pflichtfeld ist, genügt das Attribut required, das einfach jedem Formularfeld hinzugefügt wird. Für die Barrierefreiheit reicht das jedoch nicht aus und wir fügen zusätzlich ein aria-Attribut hinzu.
<form method="post" name="kontaktformular">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Name" required aria-required="true">
...
<button type="submit">Senden</button>
</form>
Erklärung: Mit aria-required=“true“ wird diese Information zusätzlich explizit für Screenreader bereitgestellt – für eine klarere Nutzerführung.
Im Formularcode ist diese Praxis stellvertretend nur für das Textfeld Name gezeigt. Für die anderen Formularfelder gilt das ebenso.
Step 3: Bedienbarkeit optimieren, Fehler abfangen
Eigentlich ist unsere Formular nun grundsätzlich barrierefrei, aber in der Nutzung kann es noch zu Problemen kommen. Gehen wir davon aus, dass bei E-Mail etwas ungültig ist, weil das @ fehlt. Damit User auch im Screenreader eine Meldung erhalten, können wir etwas Code hinzufügen.
<label for="email">E-Mail</label>
<input type="email" id="email" name="email" required aria-required="true" aria-describedby="email-hinweis">
<span id="email-hinweis">Bitte geben Sie eine gültige E-Mail-Adresse ein. Achten Sie darauf ein @ zu verwenden..</span>
Erklärung: Mit aria-described=“email-hinweis“ können für den Screenreader vorlesbare Zusatzinfos platziert werden.
Wenn man jedoch einen Fehler abfangen muss, weil das Formular unvollständig ausgefüllt ist, möchte den Fehler natürlich abfangen, nachdem der Senden-Button geklickt wurde.
Folgende Umsetzung ist falsch:
<label for="email">E-Mail</label>
<input type="email" id="email" name="email" required aria-required="true" aria-invalid="true" aria-describedby="email-hinweis">
<span id="email-hinweis">Bitte geben Sie eine gültige E-Mail-Adresse ein. Achten Sie darauf ein @ zu verwenden..</span>
Erklärung: Denn hier wird der Fehler, dass das Formularfeld leer ist, statisch ins Formular eingebunden. Das ist suboptimal und verwirrend für Menschen, die Screenreader nutzen, da ein Fehler angezeigt wird, obwohl noch gar nichts eingegeben wurde.
Richtige Umsetzung: Per Javascript: Wir erfassen den Fehler dynamisch, und zwar während des EIngabeprozesses
const emailInput = document.getElementById('email');
emailInput.addEventListener('blur', () => {
if (!emailInput.checkValidity()) {
emailInput.setAttribute('aria-invalid', 'true');
} else {
emailInput.removeAttribute('aria-invalid');
}
});
Erklärung: Das Skript prüft zunächst, ob das Feld Email im Fokus ist. Wenn es verlassen wird und leer, dann wird das Aria-Attribut gesetzt und der Screenreader liest den Fehler vor. Der Nutzer kann jetzt entscheiden, ob er weiterzieht oder den Fehler durch Eingabe beseitigt.
Aber auch beim Absenden des Formulars haben wir das gleiche Problem. Screenreader geben die Browser-Fehlerausgabe nicht sicher zurück und eine Verknüpfung zum eigentlichen Fehlerfeld gibt es nicht bzw. nur visuell.
Somit benötigen wir mehr Javascript um den Fehler über <submit> abzufangen.
const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
if (!emailInput.checkValidity()) {
emailInput.setAttribute('aria-invalid', 'true');
e.preventDefault(); // verhindert das Abschicken
} else {
emailInput.removeAttribute('aria-invalid');
}
});
Zusammengefasst
Wir haben das kleine Formular nun Stück für Stück auf Barrierefreiheit optimiert. Hier nochmal gebündelt, wie Formulare barrierefrei werden:
- Jedes Feld braucht ein klar zugeordnetes Label
- Platzhaltertexte sind schön, aber keine Hilfe in Screenreadern.
- Pflichtfelder mit aria-required=“true“ zusätzlich kennzeichnen
- Fehlermeldungen und Hilfetexte am Feld-Element platzieren und sinnvoll betexten
- Mit etwas Javascript können Eingabefehler gezielt abgefangen werden, sowohl beim Eingabeprozess als auch beim Absenden.
