2.1.4. Carrousels (slideshows)

Principe

Les carrousels (ou slideshows) sont des modules qui permettent l’affichage de panneaux de contenus défilants dans une zone réduite.

Ils sont généralement agrémentés d’un système de pagination, de flèches de navigation, et/ou encore d’un système de mise en pause et de relance du mouvement dans le cas d’un carrousel à défilement automatique.

Dans le cadre d’une mise en accessibilité, deux types de carrousels sont principalement à distinguer :

  1. Les carrousels à défilement automatique.
  2. Les carrousels à défilement manuel.

Code HTML de base

Le code HTML de base pour les deux types de carrousels peut par exemple être le suivant. Ce code est à adapter au contexte, notamment pour ce qui a trait au contenu des panneaux.

<ul id="carrousel">
    <li class="panneau" id="panneau-1">
        Contenu du panneau 1.
    </li>
    <li class="panneau" id="panneau-2">
        Contenu du panneau 2.
    </li>
    <li class="panneau" id="panneau-3">
        Contenu du panneau 3.
    </li>
</ul>

Sans JavaScript, tous les panneaux sont affichés.

Remarque

Les recommandations à suivre lors de l’écriture du code JavaScript seront ensuite différentes selon le type de carrousel souhaité : défilement automatique ou non.

Comportement avec JavaScript pour les carrousels à défilement automatique

Les scripts doivent gérer les points suivants :

  • Un élément qui permet la mise en pause et la relance de l’animation du carrousel est intégré dans le DOM, avant le contenu des panneaux.
  • L’intitulé de cet élément change dynamiquement selon que le carrousel soit en position de lecture ou de pause.
  • Les panneaux qui ne sont pas affichés à l’écran sont sortis de l’écran en CSS via position: absolute; et left: -999999px;. Ils ne sont pas masqués avec display: none;.
  • Puis, si les panneaux contiennent des éléments interactifs, un script gère la navigation au clavier :
    • Seul le contenu du panneau actif est tabulable. Appliquer pour cela un tabindex=“0”, ou supprimer les attributs tabindex, sur l’ensemble des éléments interactifs contenus dans le panneau (liens, boutons, champs de formulaires, etc.).
    • Pour empêcher la prise de focus dans le contenu des panneaux non affichés à l’écran, un tabindex=”-1” est appliqué sur l’ensemble des éléments interactifs contenus dans ces derniers.
    • Ce comportement est appliqué à chaque fois qu’un nouveau panneau est affiché.

Le code ainsi obtenu avec JavaScript sera le suivant :

<button id="lecture-pause">Pause</button>
 
<ul id="carrousel">
    <li class="panneau" id="panneau-1">
        Contenu du panneau 1 (masqué) avec <a href="#" tabindex="-1">un lien</a>.
    </li>
    <li class="panneau panneau-actif" id="panneau-2">
        Contenu du panneau 2 avec <a href="#">un lien</a>.
    </li>
    <li class="panneau" id="panneau-3">
        Contenu du panneau 3 (masqué) avec <button tabindex="-1">un bouton</button>.
    </li>
</ul>

Remarque

Ce code est à adapter au contexte, notamment si le bouton de mise en pause est en fait une image. Il faudra alors privilégier un code du type :

<button id="lecture-pause"><img src="images/pause.png" alt="Pause" /></button>

Attention

Le système de mise en pause (ici, le bouton “Lecture/Pause”) doit toujours être placé avant les éléments sur lesquels il agit, dans le DOM, quelle que soit sa position à l’écran.

Comportement avec JavaScript pour les carrousels à défilement manuel

Les scripts doivent gérer les points suivants :

  • Un élément qui permet d’afficher le panneau précédent est intégré dans le DOM, avant le contenu des panneaux.
  • Un élément qui permet d’afficher le panneau suivant est intégré dans le DOM, après le contenu des panneaux.
  • Les panneaux qui ne sont pas affichés à l’écran sont masqués à l’écran en CSS via display: none;.

Le code ainsi obtenu avec JavaScript sera le suivant :

<button id="precedent">Précédent</button>
 
<ul id="carrousel">
    <li class="panneau" id="panneau-1">
        Contenu du panneau 1 (masqué).
    </li>
    <li class="panneau panneau-actif" id="panneau-2">
        Contenu du panneau 2.
    </li>
    <li class="panneau" id="panneau-3">
        Contenu du panneau 3 (masqué).
    </li>
</ul>
 
<button id="suivant">Suivant</button>

Remarque

Ce code est à adapter au contexte, notamment si les boutons “Précédent” et “Suivant” sont en fait des images. Il faudra alors privilégier un code du type :

<button id="precedent"><img src="images/precedent.png" alt="Précédent" /></button>
 
[...]
 
<button id="suivant"><img src="images/suivant.png" alt="Suivant" /></button>

Démonstration

Démonstration à venir.

notices/interfaces-riches-javascript/carrousels-slideshows.txt · Dernière modification: Le 06/03/2013 à 16:34 (modification externe)
 

Projet coordonné par Atalan.

En partenariat avec :

Et le soutien de :