Foutidentificatie
Fouten moeten in tekst worden beschreven (niet alleen kleur), bij het veld worden geplaatst, en via aria-describedby + role="alert" worden aangekondigd. Specifiek en actiegericht: "Voer een geldig e-mailadres in" niet alleen "Ongeldige invoer".
When a form goes wrong, say clearly in words what the problem is and how to fix it — not just a red outline.
WCAG 3.3.1 (Niveau A) vereist dat fouten in tekst worden geïdentificeerd. WCAG 3.3.3 (Niveau AA) vereist foutsuggesties wanneer bekend. WCAG 3.3.4 (Niveau AA) vereist foutpreventie voor juridische/financiële acties.
Beste praktijk: combineer een foutsamenvatting bovenaan het formulier (met links naar elk veld) met inline foutmeldingen naast elk veld, verbonden via aria-describedby.
Waarom dit belangrijk is
Dit faalt op 62% van de homepagina's. Wanneer formulierfouten alleen worden aangegeven door een rode rand of kleurverandering, missen schermlezersgebruikers en kleurenblinde gebruikers ze volledig. Vage foutmeldingen ("Ongeldige invoer") laten gebruikers raden wat er mis ging.
Hoe te detecteren
Dien formulieren in met lege verplichte velden en ongeldige gegevens. Worden fouten in tekst beschreven? Staan ze bij het relevante veld? Worden ze aangekondigd aan schermlezers? Zijn ze specifiek ("Voer een geldig e-mailadres in" niet alleen "Fout")?
Hoe op te lossen
<label for="email">Email address</label>
<input id="email" type="email"
aria-invalid="true"
aria-describedby="email-error" />
<p id="email-error" role="alert" class="error">
Enter a valid email address (e.g. name@example.com)
</p>
<!-- Error summary at top of form -->
<div role="alert" aria-labelledby="error-heading" tabindex="-1">
<h2 id="error-heading">2 errors found</h2>
<ul>
<li><a href="#email">Email address is invalid</a></li>
<li><a href="#phone">Phone number is required</a></li>
</ul>
</div>