This post originally appeared on the Yahoo! Accessibility blog.
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.
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.
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.