Use ARIA To Define Invalid Responses For Form Inputs

This post originally appeared on the Yahoo! Accessibility blog.

Form Validation

accessibility-205x85

The most difficult part of building web page forms is validation. It's best to have some form of instant validation via CSS and/or JavaScript. You also need to validate the responses at the server level for security.

Fail Road

There are plenty of articles on building robust JavaScript and server side validations. There's even a YUI module for forms: The YUI 3 Form Module — Forms and Validation Made Simple. This article will focus on a set of ARIA attributes that let you define the error message for an invalid input.

Using aria-invalid and aria-describedby for invalid responses

Let's assume the user has entered data into a form and hit submit. Our nifty form validation code has found an input with an invalid response. We will place the aria-invalid="true" value on the input. and then associate it with the error message via aria-describedby attribute. It's also helpful to autofocus the first invalid input.


<input type="text" aria-invalid="true" aria-describedby="err-msg" autofocus >
<p id="err-msg">Cannot be blank</p>

This CSS will give the invalid input a red border. Ideally you would use something more obvious, such as a background image.


input[aria-invalid="true"] {
border:1px solid red;
}

These attributes directly associate the invalid input with its error explanation. It's easy to implement and will make it easier for your users. You should also place the focus on the first invalid input on page load. This prevents the user from parsing through long forms trying to find the incorrect input.

Test form

Cannot be blank

What you can do

  • Always validate your forms. Preferably have some client side validation. Server-side validation is a necessity.
  • Add aria-invalid attribute to the inputs that have errors. Tie them to the error message with aria-describedby.