Carrousels

Une mise à jour de la spécification ARIA est en cours d’officialisation : passage progressif de ARIA 1.0 (recommandation actuelle) à ARIA 1.1 (recommandation en cours d’homologation).

Cette fiche s’appuie sur les motifs de conception ARIA 1.0 issus du document WAI-ARIA Authoring Practices 1.0, et les recommandations ci-dessous pourront faire l’objet d’ajustements une fois la version ARIA 1.1 officialisée.

Pour plus d’informations sur les changements relatifs au passage à ARIA 1.1, consulter les WAI-ARIA Authoring Practices 1.1.

Sommaire

Principe

Les carrousels sont des modules dynamiques qui permettent d’optimiser l’affichage du contenu d’une page dans un espace réduit grâce à un système de navigation contrôlant l’affichage de panneaux défilants, parfois automatiquement.

Ils se présentent généralement sous la forme d’un panneau de contenu entouré de boutons « Précédent » et « Suivant » qui permettent de faire défiler les panneaux du carrousel. Ils sont souvent accompagnés d’un système de pagination.

Dans le cas d’un carrousel à défilement automatique, un système de mise en pause et de relance du défilement est présent.

Ce carrousel animé dispose d’un système de mise en pause du mouvement.

Cette fiche s’appuie sur le motif de conception « Tab Panel » détaillé dans les WAI-ARIA 1.0 Authoring Practices du W3C.

Socle HTML


<button><img src="pause.png" alt="Arrêter le défilement du carrousel" /></button>

<ul role="tablist">
  <li role="tab" tabindex="-1" aria-selected="false" aria-controls="panneau-1"><img src="puce.png" alt="Panneau 1" /></li>
  <li role="tab" tabindex="0" aria-selected="true" aria-controls="panneau-2"><img src="puce-active.png" alt="Panneau 2" /></li>
  <li role="tab" tabindex="-1" aria-selected="false" aria-controls="panneau-3"><img src="puce.png" alt="Panneau 3" /></li>
</ul>

<button><img src="precedent.png" alt="Panneau précédent" /></button>

<div>
  <div role="tabpanel" id="panneau-1" aria-hidden="true">
    [Contenu du premier panneau (masqué)]
    <a href="#" tabindex="-1">Exemple de lien</a>
  </div>
  <div role="tabpanel" id="panneau-2" aria-hidden="false">
    [Contenu du deuxième panneau (affiché, car onglet associé sélectionné)]
    <a href="#">Exemple de lien</a>
  </div>
  <div role="tabpanel" id="panneau-3" aria-hidden="true">
    [Contenu du troisième panneau (masqué)]
    <a href="#" tabindex="-1">Exemple de lien</a>
  </div>
</div>

<button><img src="suivant.png" alt="Panneau suivant" /></button>

Rôles, états et propriétés ARIA

Interactions au clavier

Tab

Lorsque l’utilisateur accède en tabulant au groupe d’onglets de pagination, le focus est positionné au niveau de l’onglet de pagination sélectionné dans le groupe d’onglets de pagination. Lorsque le focus est positionné sur un onglet de pagination, la prochaine tabulation permet à l’utilisateur de quitter le groupe d’onglets de pagination.

Maj + Tab

Même comportement qu’avec la touche Tab, mais cette fois dans l’ordre inverse de lecture.

Flèche haut et Flèche gauche

Lorsque le focus est positionné sur un onglet de pagination, déplace le focus clavier vers le précédent onglet du groupe d’onglets de pagination et sélectionne cet onglet de pagination. Si le focus clavier est positionné au niveau du premier onglet de pagination du groupe au moment où la touche est pressée, le focus clavier est déplacé au niveau du dernier onglet de pagination du groupe et cet onglet de pagination est sélectionné.

Flèche bas et Flèche droite

Lorsque le focus est positionné sur un onglet de pagination, déplace le focus clavier vers l’onglet de pagination suivant dans le groupe et sélectionne cet onglet de pagination. Si le focus clavier est positionné au niveau du dernier onglet de pagination du groupe au moment où la touche est pressée, le focus clavier est déplacé au niveau du premier onglet de pagination du groupe et cet onglet de pagination est sélectionné.

Ctrl + Flèche haut

Lorsque le focus est positionné dans un panneau, déplace le focus clavier vers l’onglet de pagination associé à ce panneau.

Ctrl + Page précédente

Lorsque le focus est positionné dans un panneau, déplace le focus clavier vers le précédent onglet de pagination du groupe et sélectionne cet onglet de pagination. Si le focus clavier est positionné au niveau du premier panneau du groupe au moment où la combinaison de touches est pressée, le focus clavier est déplacé au niveau du dernier onglet de pagination du groupe et cet onglet de pagination est sélectionné.

Ctrl + Page suivante

Lorsque le focus est positionné dans un panneau, déplace le focus clavier vers l’onglet de pagination suivant dans le groupe et sélectionne cet onglet de pagination. Si le focus clavier est positionné au niveau du dernier panneau du groupe au moment où la combinaison de touches est pressée, le focus clavier est déplacé au niveau du premier onglet de pagination du groupe et cet onglet de pagination est sélectionné.

Entrée et Espace

Lorsque le focus clavier est positionné sur les boutons de navigation, affiche le panneau précédent ou suivant.

Lorsque le focus clavier est positionné sur le bouton de mise en pause et de relance du défilement, stoppe et relance alternativement le mouvement.

Comportements attendus

Remarque

À noter qu’il est également possible de remplacer les balises <img /> dans les boutons par du texte, des images vectorielles <svg>, ou encore des police d’icônes.

Composants

Les composants ci-après sont proposés ici car leur niveau d’accessibilité est jugé bon ou très bon.

Toutefois, avant de les utiliser dans votre projet, il est important de vérifier le respect des spécifications présentées ci-avant. Certains pouvant nécessiter quelques ajustements, variables en fonction de la version utilisée.

  1. jQuery Accessible Carrousel System, using ARIA.
  2. Carrousel accessible et personnalisable.
  3. Carousel (W3C Tutorial).

6 commentaires

  • Par Nicolas, le 11 janvier 2016 à 16h12.

    Hello,

    je sais pas si ce composant est AcceDe compliant :) mais le voici : http://a11y.nicolas-hoffmann.net/carrousel/

    Répondre

    • Par Johan Ramon, le 9 février 2016 à 14h16.

      Bonjour Nicolas,

      Merci pour ton commentaire et ton script que nous venons d’ajouter dans l’encart « Composants ». :)

      Répondre

  • Par Laurent Bracquart, le 10 juillet 2017 à 11h23.

    Ajout d’un encart informatif concernant la mise à jour de la spécification ARIA depuis la version ARIA 1.0 vers la version ARIA 1.1 en introduction de la fiche le 10/07/2017.

    Répondre

  • Par Claire Bizingre, le 24 juillet 2017 à 18h42.

    Bonjour !

    Je crois qu’il y a une erreur dans le paragraphe suivant, remplacer aria-selected par aria-hidden n’est-ce pas ? :

    L’attribut aria-hidden doit être appliqué sur chaque panneau. Sa valeur doit être renseignée dynamiquement en fonction de l’état du panneau associé :

    • aria-hidden="false" sur le panneau affiché.
    • aria-selected="true" sur les autres panneaux.

    Répondre

    • Par Johan Ramon, le 25 juillet 2017 à 9h50.

      Bonjour Claire,

      Tout à fait, c’est corrigé.
      Merci beaucoup ta vigilance !

      Johan

      Répondre

  • Par Johan Ramon, le 25 juillet 2017 à 9h52.

    Mise à jour de la fiche le 25/07/2017 : remplacement de « aria-selected="true" sur les autres panneaux » par « aria-hidden="true" sur les autres panneaux ».

    Répondre

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Haut de page