Hoe je ARIA koppelt voor formulierfouten
De meeste formulieren werken goed voor ziende gebruikers, maar schieten tekort voor mensen die ondersteunende technologie gebruiken. Een ziende gebruiker ziet een rode rand en een foutmelding. Een gebruiker van een schermlezer hoort vaak niets.
Je kunt dit oplossen met twee ARIA-attributen en een kleine live region. Deze wijziging kost minder dan 50 regels code.
Hier lees je hoe je foutmeldingen koppelt aan je invoervelden.
- Gebruik aria-describedby
Het invoerveld moet verwijzen naar het fout-element. Voeg
aria-describedbytoe aan je input en stel de waarde in op de ID van je error div.
Voorbeeld:
- Input ID: email-input
- Error ID: email-error
- Code: aria-describedby="email-error"
Dit vertelt de schermlezer om de foutmelding voor te lezen wanneer de gebruiker het invoerveld selecteert. Je kunt meerdere ID's toevoegen als je ook hulptekst hebt.
- Gebruik aria-invalid
Dit attribuut laat de gebruiker weten dat de invoer onjuist is. Stel
aria-invalidin optruewanneer er een fout optreedt. Zet het opfalsewanneer de fout is opgelost.
Een veelgemaakte fout is het rood stylen van een wrapper div, terwijl aria-invalid alleen op de input wordt toegepast. Dit zorgt voor een mismatch. Zorg ervoor dat je visuele stijlen en je ARIA-attributen op hetzelfde element gericht zijn.
- Voeg een live region toe
Als er een fout verschijnt terwijl een gebruiker nog aan het typen is, kan deze worden gemist. Gebruik
aria-live="polite"op je error div.
aria-live="polite"vertelt de schermlezer om de foutmelding aan te kondigen tijdens een natuurlijke pauze.- Gebruik geen
"assertive"tenzij het een noodsituatie is. Formulierfouten zijn geen noodsituaties.
- Behandel asynchrone validatie Als je op de achtergrond een gebruikersnaam of adres controleert, moeten gebruikers weten dat het systeem aan het werk is.
- Patroon A: Gebruik
aria-busy="true"op de input terwijl de controle loopt. - Patroon B: Gebruik een verborgen live region om statusupdates aan te kondigen, zoals "Gebruikersnaam verifiëren..."
Patroon B is betrouwbaarder bij verschillende schermlezers.
Testen is verplicht. Geautomatiseerde tools zijn nuttig, maar ze kunnen handmatig testen niet vervangen. Gebruik NVDA op Windows of VoiceOver op macOS.
Je testchecklist:
- Tab naar het veld. Het label moet worden voorgelezen.
- Voer een ongeldige waarde in. De fout moet worden voorgelezen.
- Tab terug naar het veld. Het label moet samen met de foutmelding worden voorgelezen.
- Los de fout op. De foutmelding moet verdwijnen.