Error messages can be problematic to convey consistently to all users across browsers and assistive technology (AT). Using simple HTML, with a little ARIA polyfil magic if you want to get fancy, you can robustly associate error messages with controls and ensure that users get the message every time.
- You want to display a message to users in the case where they have not filled in a form field correctly.
- You want the error to be announced by screen readers when the invalid field is focused.
- You don’t wan’t any delay between the field getting focus and the error message being announced.
- You want it to work in as many browser and AT combinations as is possible.
The really simple pattern
Add the error message as a child of the label element associated with an input.
It is really robust because the error message, when added, becomes part of the accessible name for the control:
Non-error state of
accessible name: “pootish”
Error state of
accessible name: “pootish ERROR – fill it in sucker!”
A pretty simple pattern
This pattern is almost as robust as the previous, except that it relies on some ARIA magic to polyfil the lack of implementation support for multiple labels. While browsers support the activation behaviour for multiple labels (you can click on any
label associated with a control via
for/id). Only Firefox currently exposes the correct accessible name.
Using a separate
label for the error message provides more flexibility in (CSS) decoration and positioning of the message. It results in the same accessible names for the non-error and error states as the really simple pattern.
As mentioned above, browsers mostly don’t implement the deriving of an accessible name from multiple
label elements, so have filed some bugs, so in the future the use of aria-labelledby, in this case, will not be needed.
- Edge – incorrect accessible name from multiple label elements
- Chrome – acc name not produced for labelable elements that have multiple associated labels
- Firefox – accessible name from multiple label elements missing white space