Van11y Accessible Carrousel using ARIA
This script will transform a simple list of Hx/contents into shiny and accessible carrousel using ARIA.
The demo is here: https://van11y.net/downloads/carrousel/demo/index.html
Website is here: https://van11y.net/accessible-carrousel/
La page existe aussi en français : https://van11y.net/fr/carrousel-accessible/
How it works
Here is the starting code needed. Add the script, needed CSS, style it as you want, and it is ok.
A first panel Here the content. <!-- --> A second panel Here the content. <!-- --> A third panel Here the content.
The plugin will do all the job on the fly:
- Generate all needed
id
s, ARIA attributes and link everything that needs to; - Create
buttons
next and prev; - Generate the control list;
- Add classes (namespaced if you have specified), in order to let you styling it as you want;
- Add all listeners, etc.
The script is launched when the page is loaded. If you need to execute it on AJAX-inserted content, you may use for example on <div id="newContent">your carrousel source</div>
:
van11yAccessibleCarrouselAria(document.getElementById('newContent')[, addListeners]);
addListeners
is a facultative boolean (by default set to true
) to add carrousel listeners (should be set up only the first time in most of the cases).
How to use it
You may use npm command: npm i van11y-accessible-carrousel-aria
.
You may also use bower: bower install van11y-accessible-carrousel-aria
.
Then, follow the conventions given above. You may also copy/paste styles for carrousel design and styles for transitions.
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 theol
list. - If you don’t have, nevermind, please tell the plugin which level of
hx
to use withdata-carrousel-hx="hx"
, and it will insert anhx class="invisible"
for you in each tab panel (you can “visually” hide them if needed withinvisible
class). To specify the titles, use the attributedata-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 theol
list.
List of all data-attributes
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 thealt
attribute if there is an image, and in thetitle
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 thealt
attribute if there is an image, and in thetitle
attribute for the button.data-carrousel-prefix-class
: all the classes added for styling purpose will be prefixed, to simplify creating carrousel reusable styles.data-carrousel-span-text-class
: in theol
list, the text will be wrapped into aspan
with this class. Example,data-carrousel-span-text-class="yipikai"
will provide<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 the carrousel container tagdiv class="js-carrousel__container"
. And CSS will do the magic to animate it. See three examples of transitions in the demo (“slide”, “fade” and “none”).data-carrousel-active-slide
: put here the number of the slide you want to display by default for your carrousel.data-carousel-hide-arrows-focus
: will make next/prev buttons not focusable for keyboard users and not visible for speech synthesis.
How to create different styles?
In this example page, I’ve used data-carrousel-prefix-class="news"
, so all the generated classes will start with .news-carrousel
.
/* ------------------ example styles ------------------ */ /* only for minimalist example *//* ------------------ State rules ------------------ */
How to style transitions (nicely)
Here are 3 examples of transitions:
/* ------------------ transition slide ------------------ */ [[[[[[[[[ [ /* ------------------ transition fade ------------------ */ @ 100% }@ 100% } /* ------------------ transition none ------------------ */
Keyboard shortcuts
Keyboard navigation is supported too, here are the shortcuts:
If you focus on the carrousel “buttons” (not next and previous buttons, the control list):
- use Up/Left to see previous carrousel tab
- use Down/Right to see next carrousel tab
- use Home to see first carrousel tab (wherever you are in carrousel tab buttons)
- use End to see last carrousel tab (wherever you are in carrousel tab buttons)
If you focus in a carrousel content:
- use Ctrl Up to set focus on the carrousel button for the currently displayed carrousel content.
Bonuses
Panel opened by default
You may specify on js-carrousel__container
the attribute data-carrousel-active-slide="The number of the panel"
. Example: data-carrousel-active-slide="2"
will display the second panel by default. In the carrousel demo, the third example shows it.