Enable

Accessible Form Error Checking

There are two ways to make accessible forms: the native HTML5 way, or using JavaScript. You would think it would be a no-brainer to just code things the HTML5 way and call it a day instead of creating custom code. However, many designers don't like the design of native HTML5 error message "bubbles", and want/demand that flexibility. Since there doesn't seem to be any easy cross-browser workaround for this, I have laballed both of the solution below good for new and existing work: the HTML5 one is good if you want to implement validation quickly, and the custom JavaScript implementation is good if you want design flexibility.

Using native HTML5 validation

This is great if you want to implement validation quickly and don't care about the styling restrictions of native HTML5 validation.

You can use just required and pattern attributes on HTML forms to do client side validation without JavaScript.

Contact Information

* denotes a required field.

Format is xxx-xxx-xxxx
(where x is a digit)

Example code explanation

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.

☜ Scroll to read full source ☞

                    
                

Using custom validation

This solution is good if you want custom styling of the error messages
The solution below involves using Enable's accessibility.js library to make it easier to code. (Module installation instructions)

You can do the custom validation as well, but you have to ensure that when the form submits and there is an error, the first input value with an error receives focus so that keyboard and/or screen reader users can correct mistakes easily. You also have to ensure that form errors are marked up as <label> tags for the form fields they are associated with.

The following example used jQuery.validate() which is not accessible. We do not recommend to use this library for new projects ... it is just used as an example of how we can take existing code and make it accessible. If you want information about how to make forms accessible with JavaScript in the general sense, please read Alison Walden's excellent article on form validation.

Contact Information

* denotes a required field.

Format is xxx-xxx-xxxx
(where x is a digit).

Example code explanation

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.

☜ Scroll to read full source ☞

                    
                

Installation Instructions

You can load this JavaScript library into your application in serveral ways:

If you haven't done so already, choosing which you should use is obviously a major architectural decision. Here are a few articles that will help you decide:

Using NPM/Webpack to load ES6 Modules:

  1. Install the enable-a11y NPM project. Developers who are using webpack should know how to configure webpack to import the enable modules correctly.
  2. You can use the module like this:
    ☜ Scroll to read full source ☞
    // import the JS module import accessibility from '~enable-a11y/js/modules/accessibility'; // import the CSS for the module import '~enable-a11y/css/accessibility'; // How to initialize the accessibility library accessibility.init();
  3. Alternatively, if you are using LESS you can include the styles in your project's CSS using:
    ☜ Scroll to read full source ☞
    @import '~enable-a11y/css/accessibility';
    (If you are using it in your CSS, you will have to add the .css suffix)

Using ES6 modules natively.

This is the method that this page you are reading now loads the scripts.

  1. Grab the source by either using NPM, grabbing a ZIP file or cloning the enable source code from github.
  2. If you want to load the module as a native ES6 module, copy js/modules/accessibility.js, js/modules/accessibility.module.js and css/accessibility.css from the repo and put them in the appropriate directories in your project (all JS files must be in the same directory).
  3. Load the CSS in the head of you document:
    ☜ Scroll to read full source ☞
    <html> <head> ... <link rel="stylesheet" href="path-to/css/accessibility.css" > ... </head> <body> ... </body> </html>
  4. Load your scripts using:
    ☜ Scroll to read full source ☞
    <script type="module"> import accessibility from "path-to/accessibility.js" accessibility.init(); </script>

Using ES4

Just do the same as the ES6 method, except you should get the JavaScript files from the js/modules/es4 directory instead of the js/modules/:
☜ Scroll to read full source ☞
<script src="path-to/es4/accessibility.js"></script>