As a follow on from WAI-ARIA states and properties: Practical examples, I wanted to write up a bit more of what I’ve been adding to my current project. These examples all fall under how to cope with form validation and giving assistive-technology AT a view of what is going on.
When a form field is in error state, for example if an invalid email has been entered,
aria-invalid can be set to ‘true’ (or ‘spelling’ or ‘grammar’ for spelling or grammar errors in the field) to inform the user.
<input type="email" value="test@@test.com"
name="userEmail" aria-invalid="true" />
I use jQuery to validate the email and set the attribute dynamically once the user has moved from the field:
var $this = $(this);
When a field goes into error state I also display an error message in a new label element underneath. While a sighted user has immediate visibility of the message, users of AT need another cue. A
role of ‘alert’ can be added to the label which implicitly adds an
aria-live value of ‘assertive’ and will pop up to alert the user immediately.
$this.after('<label for="userEmail" role="alert">
That email address is invalid.</label>');
I am using AJAX to post form information to the server and showing the user either an error message, as described above, or a status message informing the user that the field has been saved.
A message showing advisory information does not need to interrupt the user immediately. A
role of ‘status’ can be added which has an implicit
aria-live value of ‘polite’ meaning it won’t be announced until there is a natural break in the users activity.
Use WAI-ARIA to enhance
WAI-ARIA should not be used as the only way of ensuring accessibility, after all not everyone is going to have the technology to make full use of it. Use it as an enhancement as well as making sure that all content will be accessible without it:
- Use appropriate HTML elements where possible, instead of highly customised widgets
- Error messages should appear DOM-adjacent to the field that caused it
- Use visual cues other than colour for required or error state fields