WAI-ARIA to enhance form validation

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.

aria-invalid (state)

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:

$('input[type=email]').blur(function() {
    var $this = $(this);
    if(!emailValid)
        $this.attr('aria-invalid', 'true');
    else
        $this.removeAttr('aria-invalid');
});

alert (role)

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.

if(!emailValid)
    $this.after('<label for="userEmail" role="alert">
        That email address is invalid.</label>');

status (role)

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:

Further reading