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).

Doen

Een samenvatting van de fouten boven het formulier.

Verplaats focus naar de samenvatting of de kop van de samenvatting.

Invoerfouten gevonden in het formulier

• Vul uw naam in.
• Vul uw e-mailadres in.

[...]

Over deze richtlijnen

Deze richtlijnen worden onderhouden door het 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.