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 the native HTML5 error message "bubbles", and want or demand that flexibility. Since there doesn't seem to be any easy cross-browser workaround for this, I have labeled both of the solutions below as 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
You can use just the required
and pattern
attributes on HTML forms to do client-side validation without JavaScript.
However, to make the messaging more accessible, we have added a tiny bit of JavaScript code (inspired by this accessible HTML5 forms code demo by Paul J Adam)
to ensure the error messages themselves are more accessible to screen reader users (see the last step in the code walkthrough for details).
Code Walkthrough of the Above Example
Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that make the example accessible.
Using custom validation
You can do the custom validation as well, but you have to ensure that when the form is submitted 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 using 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.
Code Walkthrough of the Above Example
Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that make the example accessible.
Installation Instructions
You can load this JavaScript library into your application in several ways:
- as an ES6 module using Webpack.
- as a CommonJS module using
require()
and Webpack. - as a native ES6 module within the browser.
- as an old-school ES4/JavaScript library.
If you haven't done so already, choosing which you should use is a major architectural decision. Here are a few articles that will help you decide:
- Jan Olaf Krems gives a great overview of the JavaScript file format differences.
- Joe Honton discusses that with ES modules and HTTP/2, you may not need Webpack anymore
- Stack Overflow has a really good thread about Webpack vs. ES6 modules as well.
Using NPM/Webpack to load ES6 Modules:
-
Install the
enable-a11y
NPM project. -
Edit your webpack.config.json file to resolve the
~
modifier by adding the following:module.exports = { ... resolve: { extensions: ['.js', '.jsx', '.scss', '.css', '*.html'], modules: [ path.resolve('./src/js'), path.resolve('./node_modules') ], alias: { '~enable-a11y': path.resolve(__dirname, 'node_modules/enable-a11y') ,'../enable-libs/accessibility-js-routines/dist/accessibility.module.js': path.resolve(__dirname, 'node_modules/accessibility-js-routines/dist/accessibility.module') }, ... }, ... }
-
You can use the module like this:
// 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();
-
Alternatively, if you are using LESS you can include the styles in your project's CSS using:
@import '~enable-a11y/css/accessibility';
.css
suffix)
Using NPM/Webpack to Load Modules Using CommonJS Syntax
-
Install the
enable-a11y
NPM project. -
You can import the module using
require
like this:var accessibility = require('enable-a11y/accessibility').default; ... accessibility.init();
- You will have to include the CSS as well in your project's CSS using:
@import '~enable-a11y/css/accessibility';
Using ES6 modules natively.
This is the method by which the page you are reading now loads the scripts.
- Grab the source by either using NPM, grabbing a ZIP file, or cloning the enable source code from GitHub.
-
If you want to load the module as a native ES6 module, copy
js/modules/accessibility.js
, andcss/accessibility.css
from the repo and put them in the appropriate directories in your project (all JS files must be in the same directory). -
Load the CSS in the head of your document:
<html> <head> ... <link rel="stylesheet" href="path-to/css/accessibility.css" > ... </head> <body> ... </body> </html>
-
Load your scripts using the following code (NOTE: you must use
<script type="module">
):<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 thejs/modules/es4
directory instead of the js/modules/
:
<script src="path-to/es4/accessibility.js"></script>