When a user tries to submit the form without filling in required fields, the validation kicks-in and the page scrolls back to the top of the form. Which is great for users who can see the screen.
However, the focus remains on the ‘submit’ button at the bottom of the page. For users with screen-readers, this is not very useful.
I have been advised there are two possible solutions:
1. Turn off AJAX, so that the page refreshes (in which case focus goes back to the top) BUT – we need to add ‘Error – form incomplete’ (or something like that) to the title of the page. That way the user knows that they need to go through the form again and correct it.
2. Keep the AJAX, but somehow make the keyboard focus return to the first form item that has an error, and include some text like ‘Please complete this input’ on the label (so that the screen-reader will read it out).
How possible do you think either of these options are?
.
