Accessible Client-side Form Validation with HTML5, WAI-ARIA, & the jQuery Validation Plugin
Old browsers? Old AT? JavaScript to the rescue! In the last part of our series on accessible form validation and usability enhancements we’re adding the jQuery Validation plugin to make sure our form is universally accessible on all devices that support JavaScript including the dreaded IE6.
Demo Form with HTML5, WAI-ARIA, & jQuery Validation (Default Settings)
Demo Form with HTML5, WAI-ARIA, & jQuery Validation (Tweaked Settings)
HTML5 and ARIA Have Limitations – JavaScript Does Not!
Sure JavaScript has some limitations but really there are none when you code it with accessibility in mind. It works on pretty much all browsers and mobile devices. No one really disables JavaScript unless they’re a security nerd. If you want to handle a situation where JavaScript is turned off and protect your database from SQL injection attacks then you have to validate form input on the server side as well. Server-side validation can be considered the lowest layer of accessible form validation and will work in any browser including feature phones.
Adding the jQuery Validation Plugin
jQuery is the dominant JavaScript framework on the web and can be declared the winner of the JS framework wars of the past years. jQuery’s motto is “Write Less, Do More”. Minimalism and accessibility go very well together!
It’s very simple to add jQuery Validation to any HTML form. Link to jQuery, we’re using a content delivery network here so we don’t have to download the JavaScript file. Then link to the validation plugin. Then tell jQuery to run the validation plugin on your form with the id attribute you want to validate. This will happen after the document is finished loading. Add this code to the <head>.
The plugin picks up on our inputs with the HTML5 required attribute and by default will instead do its own JavaScript validation and not use HTML5. This is a problem. We want to run HTML5 validation in browsers that support it and only run JavaScript validation in browsers that don’t support HTML5.
jQuery Validation Default Settings
There are some issues with the default settings. It stops the native HTML5 validation. The other big accessibility issue is that by default the error messages are placed in a second <label>. So there are two labels pointing to one input. This is a problem for some screen readers. VoiceOver will not announce the second label when the user tabs through the form. Steve Faulkner (@stevefaulkner) wrote a recent blog post titled, Notes on applying multiple labels for a control using the label element, and created a test case, multiple labels for a control using the label element, where you can see where multiple labels fail in certain AT. aria-labelled by is a better solution than using multiple labels.
So we have two problems so far with default settings. HTML5 validation is disabled and two labels are pointing to one input. The third problem is that the error message is being placed below the input. So we need to move that into the original label and use CSS to position it where we choose.
Tweaking jQuery Validation
Options for the validate() method
There are many options to change the default settings of the validation plugin. We want to change the errorPlacement and errorElement. We also want to remove the novalidate attribute that is applied to our form by default.
Change the code in the <head> to this:
To change the errorPlacement I found some code on Stack Overflow to select the associated label element of an input field and append the error message to that. Then I changed the errorElement to be an <em> rather than another <label>. And then used jQuery to select the form on the page and remove the novalidate attribute.
Now this is the behavior we want. Modern browsers like Chrome and Firefox will first run HTML5 validation and then other browsers with less HTML5 support like Safari on Mac an iOS will use jQuery Validation.
It even works in IE6! Check out the two demo links in different browsers to see the differences.
Demo Form with HTML5, WAI-ARIA, & jQuery Validation (Default Settings)
Demo Form with HTML5, WAI-ARIA, & jQuery Validation (Tweaked Settings)
Forms Can be Painful & Inaccessible!
Let’s change this problem with data entry on the web!
These three posts have been based on a talk I did at CSUN 2012. I hope you enjoyed the series!
Links to all three posts in this series:
- Accessible Client-side Form Validation with HTML5
- Accessible Client-side Form Validation with HTML5 & WAI-ARIA
- Accessible Client-side Form Validation with HTML5, WAI-ARIA, & the jQuery Validation Plugin
Comments? Questions?
So what do you think about these three layers of accessibility we’ve added to our form? I got a comment in my talk at AccessU 2012 that this seems like a lot of extra work to make an accessible form. I think it’s totally worth it to make a very usable form that is universally accessible on all devices that support accessibility.
Let me know if you have any suggestions for improvement or find any mistakes.
Great series of blog posts Paul!
It is really helpful for those who couldn’t make it to CSUN 2012.
Thanks for sharing!
Always BPositive!
Priti
Hi Priti, thanks for the comment! 🙂 Glad you liked the posts.
Hi, Thank you very much for sharing. I tried your form in a few different browser and it works nicely. However, in IE9 I am able to submit without entering information. Unlike in the other browsers Chrome, FF, etc. where all the fields become highlighted in some way. BUT when I enter the incorrect info I do receive a message ex. Please enter a valid email address. Why is IE allowing the user to submit form without data?
Hi Marisol, good catch! I looked at the code and it seems that IE won’t work with jQuery Validation unless you add class=”required”. With the other browsers the validation plugin could pick up on the HTML5 required attribute and apply the javascript validation but not IE.
I guess IE6 is not the only version of Internet Explorer that is the Kryptonite of Web Developers 😉
I updated the code on the demos so they should both work with IE9 now.
How to change the language, please ? I would like in french. I tried to change in jquery.valide.js but it doesn’t work. It still show “please, fill out this field”.
Thanks