Wie man ARIA für Formularfehler implementiert
Die meisten Formulare funktionieren gut für sehende Nutzer, aber sie versagen bei Menschen, die assistive Technologien verwenden. Ein sehender Nutzer sieht einen roten Rahmen und eine Fehlermeldung. Ein Screenreader-Nutzer hört oft gar nichts.
Sie können dies mit zwei ARIA-Attributen und einer kleinen Live-Region beheben. Diese Änderung erfordert weniger als 50 Zeilen Code.
So verknüpfen Sie Ihre Fehler mit Ihren Eingabefeldern.
- Verwenden Sie aria-describedby Das Eingabefeld muss auf das Fehlerelement verweisen. Fügen Sie aria-describedby zu Ihrem Input hinzu und setzen Sie den Wert auf die ID Ihres Error-Divs.
Beispiel:
- Input-ID: email-input
- Error-ID: email-error
- Code: aria-describedby="email-error"
Dies weist den Screenreader an, die Fehlermeldung vorzulesen, wenn der Nutzer das Eingabefeld fokussiert. Sie können auch mehrere IDs hinzufügen, wenn Sie zusätzlich Hilfetexte verwenden.
- Verwenden Sie aria-invalid Dieses Attribut teilt dem Nutzer mit, dass die Eingabe falsch ist. Setzen Sie aria-invalid auf true, wenn ein Fehler auftritt, und auf false, wenn der Fehler behoben ist.
Ein häufiger Fehler besteht darin, ein Wrapper-Div rot zu stylen, aber aria-invalid nur auf das Input-Feld anzuwenden. Dies führt zu einer Diskrepanz. Stellen Sie sicher, dass Ihre visuellen Styles und Ihre ARIA-Attribute dasselbe Element ansprechen.
- Fügen Sie eine Live-Region hinzu Wenn ein Fehler erscheint, während der Nutzer noch tippt, übersieht er ihn möglicherweise. Verwenden Sie aria-live="polite" für Ihr Error-Div.
- aria-live="polite" weist den Screenreader an, den Fehler während einer natürlichen Pause anzukündigen.
- Verwenden Sie nicht "assertive", es sei denn, es handelt sich um einen Notfall. Formularfehler sind keine Notfälle.
- Asynchrone Validierung handhaben Wenn Sie einen Benutzernamen oder eine Adresse im Hintergrund prüfen, müssen die Nutzer wissen, dass das System arbeitet.
- Muster A: Verwenden Sie aria-busy="true" auf dem Input, während die Prüfung läuft.
- Muster B: Verwenden Sie eine versteckte Live-Region, um Statusaktualisierungen wie „Benutzername wird überprüft...“ anzukündigen.
Muster B ist bei verschiedenen Screenreadern zuverlässiger.
Tests sind obligatorisch. Automatisierte Tools sind hilfreich, können aber manuelles Testen nicht ersetzen. Verwenden Sie NVDA unter Windows oder VoiceOver unter macOS.
Ihre Test-Checkliste:
- Tabben Sie in das Feld. Das Label sollte angesagt werden.
- Geben Sie einen ungültigen Wert ein. Der Fehler sollte angesagt werden.
- Tabben Sie zurück in das Feld. Das Label sollte zusammen mit dem Fehler angesagt werden.
- Beheben Sie den Fehler. Die Fehlermeldung sollte verschwinden.