Accessible Textboxes

It may surprise a lot of people that you can make editable textboxes without JavaScript and without using <input type="text"> or <textarea> tags.

Why would you use the ARIA method? I can see two reasons:

  1. Maybe because you can't use ::before or ::after pseudo-elements to style form elements, although there are other ways around this without using ARIA.
  2. If you wanted to create a WYSIWYG editor then you would have to do this, since form elements don't allow the editing of formatted text.

This last use case we do not cover, since creating an accessible WYSIWYG editor would involve quite a bit of JavaScript (I will be adding a page in Enable about WYSIWYG editors in the future).

HTML example

This is the best solution to use, especially when building from scratch.
Payment information

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 makes the example accessible.

☜ Scroll to read full source ☞

                    
                

ARIA example

Recommended only if you needed to create a JavaScript WYSIWYG editor.

Keep in mind that if you use this in a form, none of the nice free form functionality (e.g.: HTML5 validation, inclusion of data when submitting a form in an HTTP request, etc), won't work. These example do, however, show up in Voiceover's Rotor and NVDA's Element Dialogue.

Payment Information

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 makes the example accessible.

☜ Scroll to read full source ☞

                    
                

Textbox With Character Counter

The character counter is visible at all times. It is announced to screen reader users when:

  1. They use the keyboard to access the textbox (e.g. using the TAB key).
  2. When there are n characters left before the textbox is filled, where n is either 20 (the default value) or the value used in the textbox's data-warning-threshold attribute.
Payment information

The character counter uses a JavaScript library to implement it. Below is the HTML markup needed for it to work, as well as instructions on how to load the library in your own projects.

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 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.
  2. Edit your webpack.config.json file to resolve the ~ modifier by adding the following:
    ☜ 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:
    ☜ Scroll to read full source ☞
    // import the JS module import enableCharacterCount from '~enable-a11y/js/modules/enable-character-count'; // How to initialize the enableCharacterCount library enableCharacterCount.init();

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:
    ☜ Scroll to read full source ☞
    var enableCharacterCount = require('enable-a11y/enable-character-count').default; ... enableCharacterCount.init();

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/enable-character-count.js from the repo and put them in the appropriate directories in your project (all JS files must be in the same directory).
  3. Load your scripts using the follwing code (NOTE: you must use <script type="module">):
    ☜ Scroll to read full source ☞
    <script type="module"> import enableCharacterCount from "path-to/enable-character-count.js" enableCharacterCount.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/enable-character-count.js"></script>