jQuery Accessible Carrousel System, using ARIA

Find/fork me on Github

Other accessible plugins

The jQuery plugin will transform a simple list of div’s and hx into a fantastic-shiny carrousel system, using ARIA.

Here are how-to-use and some examples of this plugin.

Last updates

5th of March 2017:

Added type="button" to buttons, and updated title and alt generation, thanks to @juliemoynat

10th of December 2016:

Added custom events for hooking in, thanks to @meshenka

22th of November 2016:

Fixed issue when $ is not available as a global variable, thanks to @meshenka

22th of August 2016:

Fixed missing variable declarations in scope, thanks to @zomars

18th of August 2016:

Fixed a bug on controllers generation.
Put event listeners outside of global if, in case of Ajax insertion.

7th of February 2016:

this plugin is available on NPMjs.com, and you can install it with npm i jquery-accessible-carrousel-aria.

15th of May, 2015

Refactored data collection to optimise for size and performance, thanks to @whatevertechno

9th of April, 2015

Now the buttons next/prev are giving focus to next/prev content, instead of giving focus to control list (great suggestion made by @goetsu, much better for keyboard users).


A first and “standard” example

A robust base

  • This carrousel is based on simple div’s, so your page will be working even without JavaScript!
  • The code that it produces is valid and semantic.
  • It is entirely modular, quite easy to use and customise.

An accessible carrousel

Lightweight

  • 25kb (development, readable by humans);
  • 8kb (minified, readable by machines);
  • 2kb minified and gzipped (readable by… mutants‽‽).

Free and no license problem

  • No license problem: it uses MIT license, so it’s free, open-source and you can do whatever you want with it, including commercial use. This permission notice shall be included in all copies or substantial portions of it.
  • However, it is not prohibited to send me a little “thanks”. ;)

It’s (highly) customisable

  • You can style it as you want;
  • You can set up transitions… as you want;
  • A lot of classes are proposed to customize it easily;
  • There is no CSS code injected into HTML, so your DOM is clean, especially for responsive.

How it is working

A first control

An ordered list ol class="js-carrousel__control__list" is inserted before all elements, same as in my accessible tabpanel system.
For this example, I’ve positionned it below.

Then it adds buttons

A div with a button is inserted between carrousel contents and the first control list. It is the “previous” button.
Another one is inserted after all carrousel contents, for the… “next” button.

ARIA is coming

Once the HTML markup is set up in a logical order for keyboard in the DOM, all ARIA attributes are added to make the link between tab buttons and tab contents, to know which one is related to which other.

And JavaScript does the rest

Keyboard shortcuts of ARIA Design Pattern for tabpanels are added, and you can easily navigate and use the carrousel.
Some listeners are waiting for you to click or use keyboard, and will do the job.


How to use it

Here is the starting code needed. Just add jQuery and the plugin, needed CSS, style it as you want, and it is ok.

<div class="carrousel relative">      
  <div class="carrousel__container mod--hidden" 
   data-carrousel-btn-previous-img="./arrow_back.png" 
   data-carrousel-btn-next-img="./arrow_next.png"
   data-carrousel-btn-previous-text="Show previous panel"
   data-carrousel-btn-next-text="Show next panel"
   data-carrousel-prefix-classes="news"
   data-carrousel-span-text-class="invisible"
   data-carrousel-transition="fade"
   data-carrousel-existing-hx="h3">
          
    <div class="carrousel__content">
      <h3>A first panel</h3>
      <p>Here the content.</p>
    </div><!--
 --><div class="carrousel__content">
      <h3>A second panel</h3>
      <p>Here the content.</p>
    </div><!--
 --><div class="carrousel__content">
      <h3>A third panel</h3>
      <p>Here the content.</p>
    </div>
          
  </div>
</div>

You may also use npm i jquery-accessible-carrousel-aria.

Important note: for accessibility purposes (for VoiceOver), the plugin has to give focus to hx (h2, h3, h4, etc.) in tab contents. It is better having hx in each content tab.

Other attributes are available:

Usually, I minify my CSS, but for this example, I didn’t.
Go into the CSS and have a look (search “styles for carrousel, examples”), and also in the breakpoints.


Keyboard shortcuts

Keyboard navigation is supported too, here are keys.

If you focus in the carrousel “buttons” (not next and previous buttons):

If you focus in a carrousel content:

Warning: Ctrl+PageUp/PageDown combination could activate for some browsers a switch of browser tabs. Nothing to do for this, as far as I know (if you have a solution, let me know).


Logic of styling classes added

Major elements are styled like this, example with:

<ol class="js-carrousel__control__list 
           prefix-carrousel__control__list 
           prefix-carrousel__control__list--1"
    role="tablist">