@utrecht/form-field-error-message-css

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