In my page I show an alert using Javascript, but I am facing a focus problem, the focus is always on the main form, so a visually impaired user can't use the accessibility tool to read the error msg as it is reading the main form not the error msg in the js alert. So what I am trying to do is to make the focus on the alert so the accessibility tool can read the error message for the user.
My code:
alert('Errors\n' + msg + '\n\n' + msg)
I tried focus and slidedown and it is not working
$("#jquery_validate_error_focus").focus();
$("#jquery_validate_error").slideDown();
If you are actually using the alert()
function, you don’t have an issue, because it’s a very accessible, interrupting dialog component that will receive focus as well.
If you are injecting/showing the error message in the page, you can fix the focus and announcement issue by means of the ARIA alert
role.
<div role="alert">Your name is required</div>
It will make the screenreader announce the feedback wherever focus or reading position is.
But you also need to keep that feedback message visually close to where the user interacts with the form. Visually impaired users also use screen magnifiers and might see but a field or button at a time.
See also Usable and Accessible Form Validation and Error Recovery by WebAIM