Nordburg Solutions

How to Write Accessible Forms - Don't forget the errors!

This tutorial can be viewed one part at a time or all in one page.

Don't forget the errors!

Inevitably a user will put bad data into a form, and those errors need to be caught and reported to the user. And the user may need some help to fix the error.

Your form data should be validated at the server for sure. If you want to validate in the browser with Javascript, that's fine too. You need to validate at the server for security purposes. If the submitted form has invalid data, then the user should be sent back to the page where errors are listed in a list of links to the fields that contain the errors. As for accessibility, there's nothing wrong with this approach, but when the page re-loads, the focus will be at the top of the page and a blind user will have to go through the page until they get to the errors so they can fix them and re-submit. The only accessibility consideration here is that you should probably add the word "Error" to the page title so a blind user will hear that they're on the same page, but there are errors to be fixed.

For the remainder of the tutorial we will assume client-side Javascript form validation. We'll assume those functions are already written and we don't need to see how they're done. We'll assume the validate() returns an object with a list of errors, and the id values of the form controls to which they refer.