Accessible Pagination Table

If you are going to use this in a new webpage, please review our Sticky Table Header Example and decide which solution is better for your use-case.

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

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

If you have a lot of data in a table that you want to present to the user in small, bite-sized chunks, you may want to use a pagination UI element to do this. The solution presented below is accessible and works for keyboard and screen reader users.

That said, it is a bit of work for a keyboard and screen reader use to any pagination UI, even if it is accessible. It may be easier for users to navigate a table with a sticky header instead. Before you implement this solution (or if you are trying to make an existing pagination component accessible), weigh the pros and cons between this and the Sticky Header solution.

Paginated Table Example

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.

Important Note on the CSS Classes Used in This Module:

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

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 paginate from '~enable-a11y/js/modules/paginate'; // import the CSS for the module import '~enable-a11y/css/paginate'; // How to initialize the paginate library paginate.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();
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/paginate';
   (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 paginate = require('enable-a11y/paginate').default; ... paginate.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/paginate';

Using ES6 modules natively.

This is the method by which the 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/paginate.js , and css/paginate.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 your document:
   Wrap text

   ☜ Scroll to read full source ☞

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

   ☜ Scroll to read full source ☞

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

Using ES4