Campus Design System

Appearance

3.3.3 Foutsuggestie niveau AA ​

Uitleg ​

Het WCAG-criterium 3.3.3 Foutsuggestie vereist dat wanneer een gebruiker een fout maakt bij het invullen van een formulier of interactie-elementen, er een suggestie wordt gegeven over hoe de fout kan worden gecorrigeerd. Dit criterium valt onder de niveau AA-vereisten, wat betekent dat het belangrijk is voor een breed scala aan gebruikers, inclusief degenen die moeite hebben met het begrijpen van foutmeldingen of die specifieke hulp nodig hebben bij het corrigeren van fouten.

Het doel van dit criterium is om gebruikers te helpen niet alleen fouten te identificeren, maar ook te voorzien van suggesties die hen in staat stellen de fouten snel en correct te herstellen. Dit kan variëren van het aanbieden van automatische correcties, zoals het voorstellen van een juiste e-mailindeling, tot het verstrekken van gedetailleerde aanwijzingen voor de vereiste gegevensinvoer.

Wat betekent dit in de praktijk? ​

Wanneer een gebruiker bijvoorbeeld een formulier invult en een fout maakt, moet de website niet alleen de fout identificeren (zoals bij 3.3.1 Foutidentificatie), maar ook een suggestie geven voor hoe de fout gecorrigeerd kan worden. Dit kan bijvoorbeeld een voorstel zijn voor het juiste formaat van een telefoonnummer, of een automatische aanvulling van een verkeerd ingevoerde postcode.

Een goed voorbeeld van een foutsuggestie is een situatie waarin een gebruiker een onjuiste e-mail invoert (bijvoorbeeld zonder het "@"-symbool). De website kan dan automatisch de fout detecteren en een suggestie geven voor het juiste formaat van de e-mail.

Voorbeeld van het probleem ​

Stel je voor dat een gebruiker een formulier invult en per ongeluk een fout maakt, zoals het invoeren van een onjuist e-mailadres zonder het "@"-symbool. De fout wordt geïdentificeerd, maar er wordt geen suggestie gegeven voor hoe de gebruiker de fout kan corrigeren. Dit kan leiden tot verwarring en frustratie.

html
<!-- Foutmelding zonder suggestie -->
<p class="error" id="email-error">Er is een fout opgetreden.</p>

Oplossing voor dit probleem ​

Het is belangrijk om niet alleen de fout te identificeren, maar ook aan te geven hoe de gebruiker de fout kan herstellen. Dit kan door een suggestie voor de juiste invoer te geven.

html
<!-- Foutmelding met suggestie voor correctie -->
<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, bijvoorbeeld:
  gebruiker@domein.com.
</p>

In dit geval wordt de gebruiker niet alleen geïnformeerd over de fout, maar ook geholpen met een concrete suggestie voor hoe ze de fout kunnen herstellen.

Belangrijke overwegingen ​

  • Duidelijkheid van de suggestie: De foutsuggestie moet duidelijk en eenvoudig zijn, zodat gebruikers precies weten hoe ze de fout kunnen corrigeren. Vermijd verwarrende of technische taal.
  • Nauwkeurigheid van de suggestie: De suggestie moet specifiek en relevant zijn voor de fout die de gebruiker heeft gemaakt. Bijvoorbeeld, als een telefoonnummer een bepaald formaat moet hebben, moet de suggestie het juiste formaat aangeven.
  • Contextuele aanwijzingen: De suggestie moet in context zijn, wat betekent dat de gebruiker niet hoeft te zoeken naar waar de fout is gemaakt. De suggestie moet vlakbij het invoerveld worden geplaatst dat de fout heeft veroorzaakt.

Voorbeeld van toepassing ​

Stel je voor dat een formulier een verplicht veld heeft voor een creditcardnummer, en de gebruiker invoert: 1234567890123456. De website kan een foutmelding weergeven en een suggestie geven voor het juiste formaat.

html
<label for="creditcard">Creditcardnummer:</label>
<input type="text" id="creditcard" name="creditcard" />
<p class="error" id="creditcard-error">
  Het creditcardnummer moet 16 cijfers bevatten. Voer het nummer in zonder spaties of streepjes.
</p>

In dit voorbeeld wordt de gebruiker niet alleen op de fout gewezen, maar ook voorzien van instructies over hoe ze het nummer correct moeten invoeren.

Testen en hulpmiddelen ​

  • WAVE Accessibility Tool: Gebruik WAVE om te controleren of je foutmeldingen duidelijk zijn en of ze suggesties bevatten voor het corrigeren van fouten. WAVE Tool.
  • Axe Accessibility Tool: Axe kan helpen bij het identificeren van formulieren zonder foutsuggesties of met onvoldoende duidelijke foutmeldingen. Axe Tool.

Referenties ​