Package Exports

@utrecht/form-field-error-message-css
@utrecht/form-field-error-message-css/dist/index.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@utrecht/form-field-error-message-css) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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

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