For screen reader users it can be both disorienting and frustrating if your form validation reloads the page when there’s an error on a field, and little (or no) feedback is given to the unsighted user. There’s many things you can do to make your error handling friendlier to screen reader users, but the easiest is probably also one of the most effective – add a “skip to errors” link right in front of your “skip navigation” link.
If you’ve built a web form and you’re not using any client-side validation (which, let’s face it, has accessibility issues all of it’s own…) then the chances are your script will reload the page and in some way highlight the fields that have been missed (or have something wrong with them) when there’s a validation problem.
For sighted users this is fine – more than likely you’ve styled the error fields in some way, and hopefully put a summary of the problems above the form. It’s instantly clear what you’ve missed, and what you need to do about it. For unsighted users with a screen reader, it’s an altogether different experience. If the page is reloaded then the screen reader starts from scratch at the top. Last thing they knew, they hit Enter on your ‘Submit’ button – now they’re getting all the same content read out to them again. Even if you’ve put a nice summary of the errors above the form, it could take a screen reader user a while to tab through all the preceding links and content to get to it.
If the page is reloading because I haven’t filled the form out correctly, I’d want to know about it as soon as possible. For a screen reader user, ‘as soon as possible’ really means the first piece of content that gets read out. So, if there’s a validation error with the form, why not add a ‘Skip to errors’ link as the first item on the page? Screen reader users know immediately that they are still on the same page, and that they’ve still got a bit more to do before they can submit. The link would anchor down to your summary where you list each of the fields with errors. Simple.
Chances are that for validation you’re keeping a counter of errors which you then use to decide whether to submit the form or reload with errors highlighted – I use the value of this counter to show the extra ‘skip’ link if the page has reloaded. Kind of like this:
<?php
if(isset($_POST['process']) and ($failValidation>0)){
echo("<a href=\"#errorMessage\">Skip to form error message</a> ");
}
?>
You could also change things like the page title or heading in exactly the same way – it all helps to make it a bit more obvious to screen reader users that the same page they were on has reloaded, and why. Like I said, very simple – but very useful.
Written by: Andy Bryant
Published on: 19 Aug 2010
Tags: Accessibility, assisitve technology, eadn, screen readers, web forms
I tend to send the form to another page (form action=”validation.php”) and than return to the form (in an header redirect) to either show errors or a success message. In the redirect back to the form page I simply add an in-page anchor so the user returns to something like: /myform.php#errors while errors is then the id of the list containing the errors.