Zet een samenvatting van de foutmeldingen boven het formulier

Een zeer gebruikersvriendelijke manier om fouten weer te geven is een combinatie van:

• een samenvatting boven het formulier en;
• per formulierveld de foutmelding herhalen.

Elke foutmelding in de samenvatting is ook een link naar het formulier. Hierdoor kan de toetsenbordgebruiker direct doorgaan naar het veld met de foutmelding.

De constructie is als volgt:

• Na het versturen van een formulier met fouten wordt boven het formulier een lijst met fouten getoond.
• Deze lijst heeft een kopje met bijvoorbeeld de tekst: “Er was een probleem met je inzending. Verbeter de fouten voor je verder gaat.”.
• Daaronder staat een lijst met de foutmeldingen. Elke foutmelding is ook een link naar het bijbehorende formulierveld.
• Het kopje boven de fouten krijgt de toetsenbordfocus. Dan staat het meteen in beeld, wordt het voorgelezen door screenreaders en is de tabvolgorde logisch: de links naar de betreffende velden zijn de eerstvolgende items.

GOV.UK geeft hiervan enkele duidelijke voorbeelden op Components Error summary.

Duidelijke foutmeldingen zijn nodig om te voldoen aan het WCAG-succescriterium 3.3.1 Foutidentificatie (niveau A).

Meer lezen over gerelateerde WCAG-succescriteria op NL Design System

Op de WCAG succescriteria pagina’s op deze website lees je meer over veelgemaakte fouten en hoe je kunt testen of jouw website aan de succescriteria voldoet.

• Succescriterium 1.3.2 Betekenisvolle volgorde
• Succescriterium 3.3.1 Foutidentificatie
• Succescriterium 3.3.3 Foutsuggestie

Over deze richtlijnen

Deze richtlijnen worden onderhouden door NL Design System en zijn op dit moment in beta.

We willen graag van de community horen of ze werkbaar en nuttig zijn. Heb je vragen, aanvullingen of opmerkingen? Open een issue op GitHub en deel je mening.