jQuery Accessible Carrousel System, using ARIA

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

---

A first and “standard” example

---

How it is working

---

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.

• If you have some, it is great, you just have to tell the plugin. In the example above, you tell it via data-carrousel-existing-hx.
  And all these subtitles will be used in the ol list.
• If you don’t have, nevermind, just tell the plugin which level of hx to use with data-carrousel-hx="hx", and it will insert an h3 class="invisible" for you in each tab panel (you can “visually” hide them if needed with invisible class).
  To specify the titles, use the attribute data-carrousel-span-text="Panel" and the plugin will create titles for each tab content: “Panel 1”, “Panel 2”, etc. And all these subtitles will be used in the ol list.

Other attributes are available:

• data-carrousel-btn-previous-img: the address of the image used for “previous” button.
• data-carrousel-btn-previous-text: the text of the “previous” button, will be put in the alt attribute if there is an image, and in the title attribute for the button.
• data-carrousel-btn-next-img: the address of the image used for “next” button.
• data-carrousel-btn-next-text: the text of the “next” button, will be put in the alt attribute if there is an image, and in the title attribute for the button.
• data-carrousel-prefix-classes: all the classes added for styling purpose will be prefixed, to simplify creating carrousel reusable styles.
• data-carrousel-span-text-class: in the ol list, the text will be wrapped into a span with this class. Example, data-carrousel-span-text-class="yipikai":

  <a … role="tab">
    <span class="yipikai">A robust base</span>
  </a>

• data-carrousel-transition: the value of this attribute will be added as a class on div class="carrousel__container". And CSS will do the magic to animate it, for this page, I’ve created three transitions: “slide”, “fade” and “none”.
• data-carrousel-active-slide: put here the number of the slide you want to display by default for your carrousel. See example of this attribute.

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

---

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

• js-carrousel__control__list: used for JavaScript purposes, better not styling with it.
• <prefix>-carrousel__control__list: a class for all carrousel control lists with this <prefix>.
• <prefix>-carrousel__control__list--1: a modifier if you need to update this case in particular.