jQuery Accessible Carrousel System, using ARIA
This jQuery plugin will transform a simple list of div
’s and hx
into a fantastic-shiny carrousel system, using ARIA.
A full demo is here: https://a11y.nicolas-hoffmann.net/carrousel/
div
’s, so your page will be working even without JavaScript!===========================
Basically:
ol class="js-carrousel__control__list"
is inserted before all elements===========================
Keyboard navigation is supported, based on ARIA DP (http://www.w3.org/TR/2013/WD-wai-aria-practices-20130307/#tabpanel && http://www.oaa-accessibility.org/examplep/tabpanel1/):
If you focus in the carrousel "buttons"
If you focus in a carrousel content
New: if you focus on next/prev buttons
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).
===========================
A demo page is here: https://a11y.nicolas-hoffmann.net/carrousel/
It can be included for one, two carrousels systems or more in a page.
===========================
You may use npm i jquery-accessible-carrousel-aria
. Or download it.
<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>
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.
data-carrousel-existing-hx
.ol
list.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
: the value of this attribute will activate the number of the specified slide, ex: data-carrousel-active-slide="3"
.
Enjoy.