Form Field Error Message

[jeffreylauwers]

We willen graag meer leren over het Form Field Error Message component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?

Deel hieronder een link naar Figma, Storybook of screenshots. Met deze informatie kunnen we bewijzen dat het component onderdeel moet worden van de NL Design System component library.

Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag!

Link naar bericht in Slack

---

Naam

Form Field Error Message

Doel

Toont een foutmelding die informeert wat er is fout gegaan en hoe dit is op te lossen.

Gerelateerde componenten

Invalid Form Alert

Richtlijnen

Foutmeldingen in een formulier - NL Design System
Onze richtlijnen rondom foutmeldingen in formulieren.

Schrijfwijze van foutmeldingen - GitHub Discussion
GitHub Discussion waarbij we tot een schrijfwijze voor foutmeldingen proberen te komen.

Onderzoek

Avoid Messages Under Fields - Adrian Roselli
Artikel beschrijft waarom Form Field Error Messages beter tussen het label en form control geplaatst kunnen worden.

Avoid Default Field Validation - Adrian Roselli
Artikel beschrijft waarom de standaard HTML5 validatie beter vermeden kan worden. Jules Ernst geeft dit ook aan in zijn comment op de backlog.

Error Message Guidelines - Nielsen Norman Group
Richtlijnen voor foutmeldingen waarbij enkele punten betrekking hebben tot Form Field Labels.

The problem with live validation and what to do instead - Adam Silver
Artikel beschrijft waarom live validatie beter vermeden kan worden.

How to make inline error messages accessible - Hidde de Vries
Artikel waarin Hidde beschrijft hoe je inline error messages toegankelijk kunt aanbieden.

[jeffreylauwers]

Amsterdam

• Storybook
• Storybook - Form Field with validation

---

Screenshots / Varianten

Storybook

Custom icon

---

Notities

• Wordt vooraf aan een form control geplaatst.
• Naast de error message lijken de meeste form controls een rode border te krijgen bij invalid state. En krijg form field een rode border aan de linker zijde.
• Error messages worden automatisch voorafgegaan door een visueel verborgen tekst, "Invoerfout". Deze tekst is te wijzigen.

[jeffreylauwers]

Den Haag

• Storybook
• Figma - Huidig (in combinatie met Text input)
• Figma - WIP

---

Screenshots / Varianten

Storybook

In combinatie met Text input

Figma - Huidig
Niet beschilbaar als 'los' component maar wel toegepast in combinatie met verschillende form controls. Onder andere...

Text input

Date picker

Text area

Radio group

Figma - WIP

---

Notities

• In Storybook ook een Invalid state voor Form field description.
• In Storybook wordt de error message onder een form control geplaatst.
• In Storybook wordt de error message onder de description geplaatst, en zit het form control er tussen.
• In Storybook naast de error message ook een dikke rode border rondom form control bij een invalid state.
• In Figma - Huidig wordt de error message onder een form control geplaatst.
• In Figma - Huidig wordt de error message combineerd met de description.
• In Figma - Huidig naast de error message ook een rode border en icoon (top-right) bij een invalid state.
• In Figma - WIP wordt de error message boven een form control geplaatst.
• In Figma - WIP wordt de error message onder de description geplaatst.
• In Figma - WIP staat er een icoon voorafgaand aan error message.
• In Figma - WIP naast de error message ook een rode dikke border rondom form control en links van gehele form field.

[jeffreylauwers]

DSO Toolkit

Storybook (in combinatie met Text input)

---

Screenshots / Varianten

Storybook
Niet beschikbaar als 'los' component maar wel toegepast in combinatie met verschillende form controls. Onder andere...

Text input

Select

Date picker

---

Notities

• Wordt 'Errortext' genoemd.
• Error message wordt onder een form control geplaatst.
• Error message wordt boven de description geplaatst.
• Icoon voorafgaand aan error message.
• Naast de error message ook een rode border rondom form control bij een invalid state. Icoon binnen form control kleur deels mee?

[jeffreylauwers]

DUO

• Documentatie website (in combinatie met Text input)

---

Screenshots / Varianten

Documentatie website
Niet beschikbaar als 'los' component maar wel toegepast in combinatie met verschillende form controls. Onder andere...

Text input

Radio group

Text area

---

Notities

• Error message wordt boven een form control geplaatst.
• Error message wordt onder de description geplaatst.
• Naast de error message ook een rode dikke border rondom form control en links van gehele form field.

[jeffreylauwers]

Open Formulieren

Storybook (in combinatie met Text input)

---

Screenshots / Varianten

Storybook
Niet beschikbaar als 'los' component maar wel toegepast in combinatie met verschillende form controls. Onder andere...

Text input

Select

Radio group

---

Notities

• Error message wordt onder een form control geplaatst.
• Error message wordt onder de description geplaatst.
• Naast de error message ook een gehele form field een licht rode background-color en links rode dikke border.

[jeffreylauwers]

Open Gemeenten

• Patternlab - Forms and Search

---

Screenshots / Varianten

Patternlab
Niet beschikbaar als 'los' component maar wel toegepast in combinatie met verschillende form controls. Onder andere...

Text input

Datepicker

Select

Text area

Radio group

---

Notities

• Error message wordt onder een form control geplaatst.
• Error message wordt [Martijn zoekt dit uit] description geplaatst.
• Naast de error message ook een rode dikke border links van gehele form field.

[jeffreylauwers]

Rotterdam

Figma

---

Screenshots / Varianten

Figma
Toegepast in combinatie met verschillende form controls. Onder andere...

Text input / Select

Radio group

---

Notities

• Error message wordt onder een form control geplaatst.
• Icoon voorafgaand aan error message.
• Naast de error message ook een rode dikke border boven de error message.

[jeffreylauwers]

RVO

• Documentatie website
• Storybook
• Figma

---

Screenshots / Varianten

Storybook

Error

Warning

Toegepast in combinatie met verschillende form controls. Onder andere...

Text input

Select

Radio group

---

Notities

• Onder de naam: Form feedback.
• Error message wordt boven een form control geplaatst.
• Error message wordt onder description geplaatst.
• Icoon voorafgaand aan error message.
• Naast de error message ook een rode dikke border rondom form control. Maar bij checkbox en radio group een dikke border links van gehele groep.

[jeffreylauwers]

Utrecht

• Storybook
• Figma

---

Screenshots / Varianten

Storybook

In combinatie met Text input

Figma

---

Notities

• Uitgebreide documentatie beschikbaar.
• Error message wordt boven een form control geplaatst.
• Error message wordt onder description geplaatst.
• Icoon voorafgaand aan error message.
• Naast de error message ook een rode dikke border rondom of border-bottom bij form control en links van gehele form field.

[jeffreylauwers]

✨ Dit component is nu Help Wanted ✨

Help je mee hem door de Community stappen te krijgen?
Form field error message op het Community bord

[Rozerinay]

✨ Dit component is nu Community ✨

Help je mee hem door de Candidate stappen te krijgen?
Form field error message op het Candidate bord

[jeffreylauwers]

Tijdens de Design System week 2024 vertelde Kim Denie dat de rode tekst met een roodfilter een stuk lastiger te zien is.

https://youtu.be/0k0C0pRFaP8?si=zXsLPJlb3cz0ZfWr&t=1050

[RenateRoke]

Candidate selectieproces: Is de component al ingesteld voor meerdere huisstijlen?

Het kernteam heeft gekeken of Form Field Error Message van Gemeente Utrecht al geschikt is om richting Hall of Fame te gaan. Hiervoor willen we dat de component succesvol in tenminste 2 verschillende huisstijlen is ingezet.

We hebben gekeken naar de huisstijl van gemeente Den Haag, OpenStad, het basis thema en de huisstijl van NL Design System en we zijn tot de volgende conclusie gekomen:

🎉 Jazeker! Met jullie hulp hebben we genoeg informatie verzameld om een goed instelbaar component als Candidate beschikbaar te gaan maken.

[RenateRoke]

Candidate selectieproces: Is de component al ingezet in meerdere projecten?

Omdat de Form Field Error Message van gemeente Utrecht geschikt is voor verschillende huisstijlen heeft het kernteam ook gekeken of hij al gebruikt wordt in productie, prototypes en templates.
Deze informatie is nodig om de component een stap verder te brengen in het Candidate proces.

We hebben hiervoor binnen community-projecten en in productie gekeken wie de component succesvol heeft ingezet en we zijn tot de volgende conclusie gekomen:

🎉 De component wordt onder andere gebruikt door:

• OpenStad gebruikt het in https://openstad.org/contact
• Gemeente Enschede gebruikt het samen met OpenStad in https://jijmaaktenschede.nl/directduidelijk/contact
• Gemeente Purmerend gebruikt het in https://signalen-frontend-wcag.vercel.app/nl/incident
• NL Design System gebruikt het in https://nldesignsystem.nl/events/heartbeat/aanmelden/

Gebruik jij de Form Field Error Message ook in jouw project? Laat het ons dan weten, zodat we zoveel mogelijk input hebben voor een mooi Candidate component.

[RenateRoke]

Candidate selectieproces: Is de component al meegenomen in een WCAG-EM audit?

Om de Form Field Error Message van Gemeente Utrecht als een toegankelijk Candidate component beschikbaar te maken is het handig als we weten of de Community implementaties al helemaal toegankelijk kunnen worden ingezet.

We hebben hiervoor gekeken of er een toegankelijkheidsverklaring beschikbaar was voor de projecten die in productie worden gebruikt. En:

🎉 Ja! We hebben de uitkomsten van de volgende WCAG-EM audit (1 of meerdere) kunnen vinden:

• Gemeente Purmerend gebruikt het in https://toegankelijkheidsrapport.frameless.io/rapport/purmerend-signalen-2024-12
• Gemeente Enschede gebruikt het middels OpenStad in https://jijmaaktenschede.nl/uploads/attachments/au0tubg6v9p5to9n1lp6qkmc-wcag-em-rapport-jijmaaktenschede-nl.pdf

Daarnaast zien we dat de Form Field Description invalid variant van Gemeente Utrecht wordt gebruikt als foutmelding in Open Formulieren. We vinden het belangrijk om eventuele toegankelijkheidsbevindingen van die implementatie ook mee te nemen in onze voorbereiding. Daarom hebben we een aantal toegankelijkheidsverklaringen bekeken van websites waarin de Form Field Description op die manier wordt ingezet:

• Gemeente Utrecht: Digitaal Loket Utrecht in https://toegankelijkheidsrapport.frameless.io/rapport/loket.digitaal.utrecht.nl-2024-06
• Open Formulieren technisch onderzoek bij gemeente Horst aan de Maas in https://www.horstaandemaas.nl/file/deelonderzoek-techniek-dimpact-formulieren-systeem-wcag-21-aa-pdf
• Open Formulieren content onderzoek bij gemeente Horst aan de Maas in https://www.horstaandemaas.nl/sites/horst-ad-maas/files/2023-03/WCAG%202.1%20AA%20inspectie%20-%20open-formulieren.horstaandemaas.nl%20-%201.1.pdf

Notities voor toegankelijkheid

📝 We hebben wat dingen gevonden die in een Candidate implementatie beter kunnen. Omdat we die niet willen vergeten hebben we hier de notities gemaakt.

Contentbevindingen:

• Het contrast van de tekst van de foutmelding op de achtergrond is te laag.
• Er ontbreekt een foutmelding, of de tekst van de foutmelding is niet beschrijvend genoeg.
• Er ontbreekt een foutsuggestie, of de tekst van de foutsuggestie is niet beschrijvend genoeg.

Om deze fouten te voorkomen zullen we goede documentatie schrijven over het toegankelijk inzetten van deze component.

Techniekbevindingen:

• De foutmelding is geen live-region en wordt daarom niet automatisch voorgelezen aan hulpsoftware.

Deze bevinding nemen we mee wanneer we aan de slag gaan met het maken van deze candidate component.

[RenateRoke]

🎉 We gaan aan de slag om Form Field Error Message Candidate te maken!

Het kernteam gaat hiervoor komende tijd kijken in deze GitHub Discussion en in de Community implementaties die beschikbaar zijn.

Daarbij kijken we ook naar community componenten die als variant van een andere component fungeren als een Form Field Error Message, zoals de Form Field Description invalid variant van de gemeente Utrecht (momenteel in gebruik bij Open Formulieren) en de Alert van RVO.

Omdat een Error Message, Description en Alert ondanks hun overlap specifieke gebruiksdoeleinden hebben en daardoor dus ook specifieke (toegankelijkheids-) richtlijnen nodig hebben, willen wij deze componenten opzichzelfstaand aanbieden.

Wij ontvangen heel graag jullie feedback en wensen voor de Candidate Form Field Error Message, zodat we zoveel mogelijk input hebben om mee aan de slag te gaan!