Campus Design System

Appearance

3.3.1 Foutidentificatie niveau A ​

Uitleg ​

Het WCAG-criterium 3.3.1 Foutidentificatie vereist dat fouten die door de gebruiker worden gemaakt in formulierinvoer of andere interactieve elementen, duidelijk worden geïdentificeerd en beschreven. Dit betekent dat wanneer een gebruiker een fout maakt, bijvoorbeeld door een verplicht veld niet in te vullen of een ongeldig bestandsformaat in te voeren, de fout op een duidelijke en begrijpelijke manier moet worden aangegeven. De fout moet niet alleen visueel zichtbaar zijn, maar ook gedetailleerd worden uitgelegd zodat de gebruiker weet wat de fout is en hoe deze gecorrigeerd kan worden.

Dit criterium is belangrijk voor de toegankelijkheid van websites, omdat het gebruikers helpt die bijvoorbeeld met assistieve technologieën zoals screenreaders werken of die moeite hebben met het verwerken van visuele informatie. Door een duidelijke foutmelding te geven, wordt de gebruikerservaring voor iedereen verbeterd en wordt voorkomen dat gebruikers vastlopen bij het invullen van formulieren.

Wat betekent dit in de praktijk? ​

Wanneer een gebruiker een formulier invult en er een fout optreedt (bijvoorbeeld een onjuist formaat voor een e-mailadres of een leeg veld), moet de website duidelijk aangeven wat de fout is en waar deze zich bevindt. Dit kan op verschillende manieren gebeuren, bijvoorbeeld door:

  • Het weergeven van een foutmelding vlakbij het formulierveld dat de fout heeft veroorzaakt.
  • Het gebruik van kleuren, pictogrammen of tekst om de gebruiker te laten weten dat er iets mis is.
  • Het verstrekken van een beschrijving van de fout, zodat de gebruiker begrijpt wat er gecorrigeerd moet worden.

Voorbeeld van het probleem ​

Stel je voor dat een gebruiker een formulier invult en per ongeluk een onjuiste e-mail invoert (bijvoorbeeld zonder het "@"-symbool). De website toont mogelijk een eenvoudige foutmelding die alleen zegt "Er is een fout opgetreden", zonder te verduidelijken welke fout er is gemaakt of waar deze zich bevindt. Dit maakt het voor de gebruiker moeilijk om de fout te herstellen, vooral als ze niet kunnen zien welke invoer verkeerd is.

html
<!-- Foutmelding zonder gedetailleerde uitleg -->
<p class="error">Er is een fout opgetreden.</p>

Oplossing voor dit probleem ​

De foutmelding moet gedetailleerd zijn, zodat de gebruiker precies weet welke actie ze moeten ondernemen om de fout te corrigeren. Dit kan bijvoorbeeld door de foutmelding direct naast het formulierveld te plaatsen dat de fout heeft veroorzaakt, en door de aard van de fout duidelijk uit te leggen.

html
<!-- Foutmelding met gedetailleerde uitleg -->
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" />
<p class="error" id="email-error">
  Het ingevoerde e-mailadres is ongeldig. Zorg ervoor dat het "@"-symbool aanwezig is.
</p>

In dit geval wordt de gebruiker duidelijk geïnformeerd over wat er mis is met hun invoer en kan het probleem eenvoudig worden opgelost.

Belangrijke overwegingen ​

  • Duidelijkheid van de foutmelding: De foutmelding moet helder en eenvoudig zijn, zodat alle gebruikers begrijpen wat er mis is en wat ze moeten doen om het te corrigeren.
  • Foutmeldingen bij invoervelden: Zorg ervoor dat foutmeldingen duidelijk worden gekoppeld aan het invoerveld dat de fout heeft veroorzaakt, zodat gebruikers snel kunnen vinden waar ze de fout moeten corrigeren.
  • Gebruik van kleur: Het gebruik van kleur kan nuttig zijn voor visuele gebruikers, maar het is belangrijk om ook tekst te gebruiken, zodat gebruikers van assistieve technologieën de foutmelding kunnen begrijpen.

Voorbeeld van toepassing ​

Stel dat je een formulier hebt waarbij gebruikers hun telefoonnummer moeten invoeren in een specifiek formaat (bijvoorbeeld: (123) 456-7890). Als de gebruiker een onjuist formaat invoert, moet de foutmelding duidelijk maken welk formaat verwacht wordt.

html
<label for="phone">Telefoonnummer:</label>
<input type="tel" id="phone" name="phone" />
<p class="error" id="phone-error">Het telefoonnummer moet in het formaat (123) 456-7890 worden ingevoerd.</p>

In dit geval wordt de gebruiker precies verteld welk formaat nodig is, wat het voor hen gemakkelijker maakt om de fout te corrigeren.

Testen en hulpmiddelen ​

  • WAVE Accessibility Tool: Gebruik WAVE om te controleren of foutmeldingen duidelijk en goed gekoppeld zijn aan de relevante invoervelden. WAVE Tool.
  • Axe Accessibility Tool: Axe kan ook helpen bij het identificeren van toegankelijkheidsproblemen met betrekking tot foutmeldingen en formulieren. Axe Tool.

Referenties ​