Accessible Sortable Tables

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

If you already are using a component similar to this in existing work that is not accessible, go to the developer walkthrough of this section to see we made our implementation accessible.

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

Giving users the ability to sort data tables is useful for everyone. We should ensure they are coded correctly. In the example below, you will learn about the grid role that you should use for these tables, and how the UI for the sorting routines ensure partially-sighted and blind users know that a sort has been successful.

The script for this table was based on the excellent sortable table example from Deque University.

Click the table heading buttons to sort the table by the data in its column.

User Information

Myk	33	Purple
Hannah	28	Blue
Salim	7	Green
Greg	45	Orange
Caitlin	21	Red
Cyan	35	Burgundy

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.

Wrap text

☜ Scroll to read full source ☞

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.

Important Note On The CSS Classes Used In This Module:

This module requires specific CSS class names to be used in order it to work correctly. These CSS classes begin with deque-table-sortable__. Please see the documentation above to see where these CSS classes are inserted.

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:

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

Wrap text
☜ Scroll to read full source ☞

// import the JS module import sortableTables from '~enable-a11y/js/modules/sortable-tables'; // import the CSS for the module import '~enable-a11y/css/sortable-tables'; // How to initialize the sortableTables library sortableTables.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 .pagination__table): el.add();
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/sortable-tables';

(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

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

Wrap text
☜ Scroll to read full source ☞

var sortableTables = require('enable-a11y/sortable-tables').default; ... sortableTables.init();
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/sortable-tables';

Using ES6 modules natively.

This is the method that this 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/sortable-tables.js , and css/sortable-tables.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 you document:

Wrap text
☜ Scroll to read full source ☞

<html> <head> ... <link rel="stylesheet" href="path-to/css/sortable-tables.css" > ... </head> <body> ... </body> </html>
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 sortableTables from "path-to/sortable-tables.js" sortableTables.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/:

Wrap text

☜ Scroll to read full source ☞

<script src="path-to/es4/sortable-tables.js"></script>