@utrecht/form-field-error-message-css
v2.0.1
Published
Form field error message component for the Municipality of Utrecht based on the NL Design System architecture
Keywords
Readme
Form field error message
Gebruik dit component voor foutmeldingen bij formuliervelden die geen valide invoer hebben.
Dit component is meestal een onderdeel van het form field component.
Gebruikte termen
formkomt van<form>in HTML enrole="form"in WAI-ARIA.fieldkomt van<fieldset>in HTML.error-messagekomt vanaria-errormessage.
HTML
Gebruik een id attribuut op dit element, zodat je met aria-describedby op de form control met aria-invalid="true" een koppeling kunt maken. Support voor aria-errormessage is nog onvoldoende, dus gebruik voorlopig nog aria-describedby.
Gebruik in HTML in plaats van aria-live="polite" het attribuut role="status".
Gebruik in HTML in plaats van aria-live="assertive" het attribuut role="alert".
Relevante WCAG eisen
- WCAG eis 1.4.1: gebruik niet alleen kleur om duidelijk te maken dat het een foutmelding is.
- WCAG eis 3.3.1. Gebruik
idattribuut op de form field description en koppel de form control metaria-describedbyaan dezeid. Zie ook: WCAG Technique: Usingaria-invalidto Indicate An Error Field - WCAG eis 3.3.2. Zie ook: WCAG Technique ARIA1: Using the
aria-describedbyproperty to provide a descriptive label for user interface controls - WCAG eis 3.3.2
