Accessible Tabs

When you have a group of content items that you want to show users one at a time, a tablist is usually desired. Tablists is another common component on the web that does not have a native HTML5 implementation (i.e. there is no such thing as a <tablist> tag), although there is a group of people who are working to eventually get this in the HTML5 specification).

ARIA Tablist Example

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 how we made our implementation accessible.
This solution described below is available as an NPM module. (Module installation instructions)

In order to make a tablist accessible, there are a few complications:

  1. Technically, tablists are a list of items, and choosing one from a group should involve the arrow keys (like how users navigate a group of radio buttons)
  2. Keyboard users may not know how this interaction works, and when they try to navigate through the tablist with a Tab key, they will be a bit confused when they skip over the whole list with one key press.
  3. While you can give screen reader user verbal instructions about how to interact with a tablist, keyboard users that don't use a screen reader won't hear them.

In order to fix this UX issue, I show the instructions visually to keyboard users only. These instructions don't appear for mouse users. They also don't appear for mobile screen reader users who don't use a keyboard. Our implementation "borrows" their visual design, while adding our own code to conform to the W3C's recommended UX for a tablist (their implementation, unfortunately, doesn't seem to work with a keyboard with some screen reader/browser combinations, like VoiceOver for Safari on OSX).

This issue has been handled in differently in Danger! ARIA tabs, written by Jeff Smith (TL;DR: He decided to not code them using ARIA tabs, but as a list of links that anchor to the tabpanels).

Use arrow keys to choose tabs. Content for the chosen tab will be revealed below.

Jamaican Ska

Ska's origins are from 1960s Jamaica. One theory about the origin of ska is that Prince Buster created it during the inaugural recording session for his new record label Wild Bells.

Artists include:

  1. The Skatellites
  2. Prince Buster
  3. Desmond Dekker
  4. Millie Small
  5. Byron Lee and the Dragonaires
  6. Laurel Aitken
  7. The Wailers
  8. Jimmy Cliff
  9. Eric "Monty" Morris
More information about Jamaican Ska

2 Tone Ska

The 2 Tone genre, which began in the late 1970s in the Coventry area of UK, was a fusion of Jamaican ska rhythms and melodies with punk rock's more aggressive guitar chords and lyrics.[24] Compared to 1960s ska, 2 Tone music had faster tempos, fuller instrumentation, and a harder edge. The genre was named after 2 Tone Records, a record label founded by Jerry Dammers of The Specials.

Artists include:

  1. The Specials
  2. Madness
  3. Bad Manners
  4. The Selector
  5. The Beat (a.k.a. "The English Beat" in the U.S.)
  6. The Body Snatchers
  7. Akrylykz
More information about 2 Tone Ska

Third Wave

Third-wave ska originated in the punk scene in the late 1980s and became commercially successful in the 1990s. Although some third-wave ska has a traditional 1960s sound, most third-wave ska is characterized by dominating guitar riffs and large horn sections.

  1. The Toasters
  2. Fishbone
  3. No Doubt
  4. The Mighty Mighty Bosstones
  5. Streetlight Manifesto
  6. The Hotknives
  7. Hepcat
  8. The Slackers
  9. Sublime
  10. Suicide Machines
  11. Voodoo Glow Skulls
  12. Reel Big Fish
  13. Less Than Jake
  14. Bim Skala Bim
More information about Third Wave Ska

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 tabs from '~enable-a11y/js/modules/tabs'; // import the CSS for the module import '~enable-a11y/css/tabs'; // How to initialize the tabs library tabs.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 .enable-tablist): el.add();
  4. Alternatively, if you are using LESS you can include the styles in your project's CSS using:
    ☜ Scroll to read full source ☞
    @import '~enable-a11y/css/tabs';
    (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:
    ☜ Scroll to read full source ☞
    var tabs = require('enable-a11y/tabs').default; ... tabs.init();
  3. You will have to include the CSS as well in your project's CSS using:
    ☜ Scroll to read full source ☞
    @import '~enable-a11y/css/tabs';

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/tabs.js , and css/tabs.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:
    ☜ Scroll to read full source ☞
    <html> <head> ... <link rel="stylesheet" href="path-to/css/tabs.css" > ... </head> <body> ... </body> </html>
  4. Load your scripts using the follwing code (NOTE: you must use <script type="module">):
    ☜ Scroll to read full source ☞
    <script type="module"> import tabs from "path-to/tabs.js" tabs.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/tabs.js"></script>