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 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.

Carousels with CTAs

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)

This carousel example use Glider.js, but the instructions will contain information to make carousels accessible for all carousel frameworks. The implementation presented here is based on this excellent article by Alison Walden.

Example code explanation

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:

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. Developers who are using webpack should know how to configure webpack to import the enable modules correctly.
  2. You can use the module like this:
    ☜ 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 the enableCarousel library enableCarousel.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.

  3. 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/enable-carousel';
    (If you are using it in your CSS, you will have to add the .css suffix)

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:
    ☜ 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:
    ☜ Scroll to read full source ☞
    <script type="module"> import enableCarousel from "path-to/enable-carousel.js" enableCarousel.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-carousel.js"></script>