Accessible Carousels

Carousels are a list of content panels that mouse user can cycle through using arrow controls and panel indicator. Usually carousels show only one panel at a time, and they usually (but not always) have at least one CTA in them. They exist to cram as much content in the valuable "Above The Fold" real estate on websites. Although it is debatable whether "Above The Fold" is as important as people think it is, it is still a solid requirement for a lot of website owners.

In our opinion, carousels are a hack designed to cram a huge amount of content within a small amount of space. There are better alternatives to carousels out there, and these articles are a good place to start if you are looking for them:

• 5 Alternatives to Using a Carousel on Your Website Homepage
• More Alternatives to Using a Carousel on Your Website
• Alternatives to carousels in web design

That said, there are times when as a web developer you are asked upon implementing an accessible one. On this page are two ways of implementing accessible carousels: one solution is good when you know there will be at least one interactive control in each panel, and the other is good when you cannot make that guarantee. Note that all the carousels on this page use Glider.js, but the code walkthrough below will contain information developers need to implement accessible carousels regardless of the carousel frameworks being used. If the developer is making a carousel from scratch, they can use the NPM module that makes Glider.js accessible (see below).

Solution 1: Treat The Carousel Like A List of Controls.

This solution is the best solution when you can guarantee there will be one interactive/keyboard focusable element in every carousel panel.

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)

Note that this solution assumes that each carousel panel has at least one CTA (i.e., call to action, or control) in it. Keyboard users simply tab into each CTA as they would any other links on the page. When keyboard users tab into a panel that is offscreen, our JavaScript library ensures that the panel comes into focus. As a result, keyboard access to the previous and next buttons are considered unnecessary, so we have intentionally removed them from the document tabbing order. If you are dealing with a carousel that can have no CTA in one or more panels, you should look at the second carousel example on this page.

The implementation presented here is based on this excellent article by Alison Walden.

Skip to end of promotional links

3 Dev Adam

Also known as Turkish Spider-Man, this 1973 film is the story of crime boss Spider-Man's battle with law enforcement heros Captain America and El Santo.

Learn More

Turkish Star Wars

Originally called Dünyayı Kurtaran Adam, two space fighters crash into a desert planet and fights a mysterious Wizard who is enslaving the local population.

Learn More

Samurai Cop

The story of a cop with an epic mullet and a samurai sword who, along with his cool partner, take on a gang of cocaine smugglers in early '90's Los Angeles.

Learn More

Lady Terminator

A woman is possessed by the legendary South Sea Queen to have revenge on the daughter of a man who stole her snake a hundred years before.

Learn More

« »

Skip to beginning of promotional links

Solution 2: Treat The Carousel Like A List of Content

This solution is best to use when you don't if each panel will have an interactive/keyboard focusable control in every panel.

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)

Like the first example, this carousel example also uses Glider.js, but the previous and next buttons are keyboard accessible; clicking on them applies focus to the carousel panel that slides into view or the first interactive element within the slide if one is available. This is great if you have carousel panels that don't have any interactive elements.

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 enable-carousel__. 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') ,'~glider-js': path.resolve(__dirname, 'node_modules/glider-js'), '~glider-js/glider.js': path.resolve(__dirname, 'node_modules/glider-js/glider') }, ... }, ... }
3. You can use the module like this:
   Wrap text

   ☜ Scroll to read full source ☞

   // import the JS module import enableCarousel from '~enable-a11y/js/modules/enable-carousel'; // import the CSS for the module import '~enable-a11y/css/enable-carousel'; /* * How to initialize your carousel to be like a * list of links (i.e. the first example) */ // First, run Enable Carousel constructor. Note that // `domContainer` is the root DOM node that has the // `enable-carousel` class assigned to it. const focusAllPanelsCarousel = new EnableCarousel(domContainer); // Next, check if it is set correctly, then initialize focusAllPanelsCarousel && focusAllPanelsCarousel.init(); /* * How to initialize your carousel to be like the second * carousel example, where keyboard focus is applied to * the newly visible panel when the arrow keys are pressed. */ // First, run Enable Carousel constructor. Note that // `domContainer` is the root DOM node that has the // `enable-carousel` class assigned to it. const focusArrowButtonsCarousel = new EnableCarousel(domContainer, { useArrowButtons: true, // Note that for browsers that don't support the `inert` propery, // you will need to include the WICG inert polyfill to support it // (As of 2023, this is basically Firefox). Note this polyfill // won't load if it isn't needed, and is relative to the // root page's URL. inertURL: 'enable-node-libs/wicg-inert/dist/inert.min.js' }); // Next, check if it is set correctly, then initialize focusArrowButtonsCarousel && focusArrowButtonsCarousel.init(); // Note that this component doesn't currently work when
// new components are added after page load.

   Note: If you want to have the skip links like in the example above, please ensure you also include the NPM module for skip links as well.

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/enable-carousel';
   (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 enableCarousel = require('enable-a11y/enable-carousel').default; ... enableCarousel.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/enable-carousel';

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-carousel.js , and css/enable-carousel.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/enable-carousel.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 enableCarousel from "path-to/enable-carousel.js" enableCarousel.init(); </script>

Using ES4