@utrecht/form-field-error-message-css v1.5.0

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

• form komt van <form> in HTML en role="form" in WAI-ARIA.
• field komt van <fieldset> in HTML.
• error-message komt van aria-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 id attribuut op de form field description en koppel de form control met aria-describedby aan deze id. Zie ook: WCAG Technique: Using aria-invalid to Indicate An Error Field
• WCAG eis 3.3.2. Zie ook: WCAG Technique ARIA1: Using the aria-describedby property to provide a descriptive label for user interface controls
• WCAG eis 3.3.2