Accessibility in javascript form validation

2019-04-07 21:07发布

问题:

This is an important issue for the blind community which I'm trying to adress. How would I tell blind visitors that the username is taken?

My current set-up is not important but for examples case, I've currently got a Jquery implementation that checks the user input against a php script over ajax, which returns a json which I then display on screen in an error field. Very basic, and beyond the scope of my issue as it is working perfectly.

But if I'm blind, I won't notice that the username Batman is already taken or can't contain spaces, and that my password requires at least 7 characters.

Alternatively, the errors are listed on the error landing page after the form is submitted without javascript- it's chunky but it works. A better more dynamic solution and suport would be optimal.

回答1:

As a screen reader user I usually just fill out the entire form, submit it, and if it doesn't work I then look for error text. In order to notify a blind user about invalid data before the entire form is submitted take a look at the aria-live="assertive" option scene on the following test page, section d. http://www.accessibleculture.org/articles/2011/02/aria-alert/ Out of all the test cases section d is the only test that worked for me under firefox 18.0.1 with Jaws 13.0. For some reason the alert option doesn't work. You could use the assertive option to notify the user that something was wrong.