Foutidentificatie
Wanneer de gebruiker een formulierfout maakt die automatisch wordt gedetecteerd, moet de fout aan de gebruiker worden geïdentificeerd en in tekst worden beschreven — niet uitsluitend via kleur, niet uitsluitend via een pictogram, en niet in stilte.
Wat het vereist
Als een formulierinvoer ongeldig is (verkeerd formaat, ontbrekende verplichte waarde, buiten het toegestane bereik) en het systeem dit automatisch detecteert, moet de fout aan de gebruiker worden geïdentificeerd met een tekstbeschrijving. De tekst moet aangeven welk veld onjuist is en wat er mis is — niet alleen dat „iets“ is mislukt.
Het succescriterium vereist niet dat het systeem elke mogelijke fout detecteert; het vereist dat gedetecteerde fouten als tekst aan de gebruiker worden getoond.
Hoe hieraan te voldoen
- Koppel aan elk formulierveld een zichtbaar foutbericht dat het probleem beschrijft, geplaatst naast of onder het veld.
- Verwijs naar het falende veld bij naam: „E-mailadres moet een @-teken bevatten.“
- Koppel de fout aan het invoerveld met
aria-describedbyzodat schermlezers het bij focus aankondigen. - Gebruik
aria-invalid="true"op het falende invoerveld. - Render bij server-side validatie een samenvattingslijst bovenaan het formulier, waarbij elk item linkt naar het falende veld.
- Kondig dynamische validatiemeldingen aan via een live-regio (
aria-live="polite"ofrole="alert") zodat schermlezers de fout horen zonder dat de gebruiker deze hoeft te zoeken.
Veelvoorkomende fouten
- Rode randen om ongeldige velden zonder teksttoelichting.
- Een generieke banner met „Formulier ongeldig“ zonder vermelding van welke velden.
- Foutberichten die alleen als tooltip verschijnen en bij fokusverlies verdwijnen.
- Uitsluitend gebruik van native browsvalidatie (
required,pattern) — de browserballon is onbetrouwbaar voor schermlezers en verdwijnt te snel. - Inline pictogramfoutindicatoren (rood uitroepteken) zonder toegankelijke naam.
Waarom het belangrijk is
Dit is de meest geciteerde invoerondersteuningsfout in audits. Voor ziende gebruikers is een rode rand tenminste een aanwijzing; voor schermlezersgebruikers is die rand vrijwel onzichtbaar. Voor kleurenblinde gebruikers is een rode rand alleen al onvoldoende. Wanneer een gebruiker een lang formulier heeft ingevuld en de inzending zonder feedback mislukt, verlaten zij het formulier waarschijnlijk — en toegankelijkheid is de reden dat het specifiek voor hen mislukte.
Combineer 3.3.1 met 3.3.3 (Foutsuggeste) en 4.1.3 (Statusberichten) — samen vormen zij het moderne patroon voor formulierfouten.