Form Field Error Message

[usethetics]

Naam

Form Field Error Message

• Link naar GitHub Discussion
• Link naar Figma Schetsboek

[julezrulez]

HTML5 validation does not conform to WCAG at the moment. In some browsers it is getting better, but better is not good enough.
Some of the problems I see in the world wild web:

• Errors are in English in an English browser, while the page is in Dutch and has a lang="nl". (indirectly WCAG)
• Error message pops up at the field with the error and stays there only for several seconds. (WCAG)
• Error message is gone as soon the field gets focus, so it could be possibly hard to correct your error. (WCAG)
• Error message popup in a way that they are outside the viewport.
• Texts or error message are not complete enough or it is an suggestion or instruction instead of an error message. (WCAG)
• Lack of suggestions or instructions (WCAG)
  The list above might not be complete. Also there are sources on the internet that keep saying HTML5 validation is accessible en onforms to WCAG. They just have to proof me I am wrong.

[usethetics]

Thanks @julezrulez, this is valuable information to document in the guidelines!

[wartburggraaf]

Amsterdam: https://github.com/Amsterdam/design-system/blob/main/packages/css/src/components/error-message/error-message.scss
Utrecht: https://github.com/nl-design-system/utrecht/tree/main/components/form-field-error-message

Op Storybook als onderdeel van Form field: https://nl-design-system.github.io/themes/?path=/story/utrecht-form-field--voorbeeld-theme