Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Accessibility in javascript form validation

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.

like image 224
rococo polkadot bandit Avatar asked Feb 05 '13 14:02

rococo polkadot bandit


People also ask

How JavaScript form can be validated?

Basic Validation − First of all, the form must be checked to make sure all the mandatory fields are filled in. It would require just a loop through each field in the form and check for data. Data Format Validation − Secondly, the data that is entered must be checked for correct form and value.

Why JavaScript form data validation is not secure?

Client side validation is NOT secure because it can easily be hacked. It is for user convenience only. For example, in response to client-side validation, the user can fix mistakes before the form is submitted. That saves the user time, and they appreciate your site.

Is HTML5 validation accessible?

Yes the standard HTML5 validation is accessible and will pass WCAG2.


1 Answers

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.

like image 98
Jared Avatar answered Oct 18 '22 18:10

Jared