Accessible Numeric Fields

Numeric form fields fall into two categories: ones that are supposed to measure a quantity (e.g. items in a shopping cart, number of dependents in your family), and ones that don't (e.g. a zip code, a social insurance number, etc). On mobile devices for both of these fields you will want a virtual numeric keyboard to appear. However, it doesn't make sense for increase/decrease controls to appear for either mouse or keyboard users for those that don't represent a quantity.

This page will cover both use cases using native HTML form fields. We will briefly also cover the ARIA spinner role.

HTML input type="number" example

This is the best solution to use when developers want to code a quantity in a form field, especially when building from scratch.

HTML numeric value that isn't a quantity

It is possible to have a numeric input without the spinner by using <input type="text" inputmode="numeric" pattern="[0-9]*">. This is currently what the recommendation of the UK government when dealing with numeric information that isn't a quantity.

ARIA example

I also don't see any reason why you wouldn't want to modify existing code to use this, unless you used <div> tags instead of <input> tags for form fields (in which case, you may really want to question some of your other life choices)

This solution described below is available as an NPM module. (Module installation instructions)

The ARIA spinner examples were originally in the article Example - Spinbutton using IMG elements for buttons by the Open Ajax Alliance (now currently offline). I refactored the code and released it as an NPM module for your convenience. It was created before <input type="number"> was supported on all browsers. I would recommend to just use that instead, but if you have existing code you need to fix, use the instructions below to make it work.

Choose a number between 0 and 100

Use the arrow keys or use the stepper buttons after this element to increase and decrease the values

50

50

Installation Instructions

You can load this JavaScript library into your application in serveral 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 obviously 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:

1. Install the enable-a11y NPM project.
2. Edit your webpack.config.json file to resolve the ~ modifier by adding the following:
   Wrap text

   ☜ Scroll to read full source ☞

   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') }, ... }, ... }
3. You can use the module like this:
   Wrap text

   ☜ Scroll to read full source ☞

   // import the JS module import spinbutton from '~enable-a11y/js/modules/spinbutton'; // import the CSS for the module import '~enable-a11y/css/spinbutton'; // How to initialize the spinbutton library spinbutton.init(); // If you are adding a new instance of this component after page load, // then do the following (where el is the DOM node of the newly created // element, which contains the CSS class .spinbutton): el.add();
4. Alternatively, if you are using LESS you can include the styles in your project's CSS using:
   Wrap text

   ☜ Scroll to read full source ☞

   @import '~enable-a11y/css/spinbutton';
   (If you are using it in your CSS, you will have to add the .css suffix)

Using NPM/Webpack to Load Modules Using CommonJS Syntax

1. Install the enable-a11y NPM project.
2. You can import the module using require like this:
   Wrap text

   ☜ Scroll to read full source ☞

   var spinbutton = require('enable-a11y/spinbutton').default; ... spinbutton.init();
3. You will have to include the CSS as well in your project's CSS using:
   Wrap text

   ☜ Scroll to read full source ☞

   @import '~enable-a11y/css/spinbutton';

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/spinbutton.js , and css/spinbutton.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:
   Wrap text

   ☜ Scroll to read full source ☞

   <html> <head> ... <link rel="stylesheet" href="path-to/css/spinbutton.css" > ... </head> <body> ... </body> </html>
4. Load your scripts using the follwing code (NOTE: you must use <script type="module">):
   Wrap text

   ☜ Scroll to read full source ☞

   <script type="module"> import spinbutton from "path-to/spinbutton.js" spinbutton.init(); </script>

Using ES4