Résultat de l'implémentation

Panneau 1

Contenu du panneau 1, en savoir plus.

Panneau 2

Contenu du panneau 2, en savoir plus.

Panneau 3

Contenu du panneau 3, en savoir plus.

Panneau 4

Contenu du panneau 4, en savoir plus.

Panneau 5

Contenu du panneau 5, en savoir plus.

A propos de cette implémentation

Cette implémentation s'appuie sur le design pattern ARIA Tab Panel.

Elle a été réalisée avec la philosophie d'être avant tout centrée sur les besoins utilisateur en contrôlant la lecture soit par l'activation d'un bouton soit par l'interaction avec le carrousel. Et aussi de démontrer que la prise en compte de l'accessibilité même sur ce genre de composants n'est un frein en rien.

Enfin, elle peut être utilisée en contexte responsive et l'exploitation des contenus reste totale lorsque les scripts sont désactivés.

Télécharger les sources (Zip, 37,6ko) distribuées sous licence MIT

Modifications à venir

  • Implémentation d'une méthode de personnalisation du bouton d'arrêt et de relance de la lecture ;
  • Implémentation d'un mode de lecture infinie (via une valeur infinite pour data-playmode) ;
  • Implémentation de la gestion du masquage des éléments fonctionnels propres au carrousel.

A l'étude :

  • Utilisation de Page Visibility API pour gérer la lecture lorsque la page est inactive ;
  • Implémentation d'un mécanisme utilisateur permettant de contrôler plus finement la lecture ;
  • Implémentation du changement de panneau par touché (contexte tactile).

Historique des modifications

Modifications du 11 décembre 2014

  • Application d'un correctif concernant la validité du code généré pour les éléments d'accès direct présentés par des chiffres et des nombres (suppression d'attributs src appliqués sur des éléments span) ;
  • Remplacement de la valeur "image" par "dots" pour la propriété data-tabs.

Modification du 22 novembre 2014

Application d'un correctif fonctionnel (mauvaise gestion de la détection du focus au sein du carrousel).

Modifications du 11 novembre 2014

Clarification sur l'utilisation du carrousel : il est distribué sous licence MIT.

Introduction de plusieurs méthodes pour personnaliser le carrousel :

  • Implémentation d'une méthode permettant de gérer l'utilisation d'aria-controls ;
  • Implémentation d'une méthode permettant de mettre en place un message d'aide aux utilisateurs clavier ;
  • Implémentation d'une méthode permettant de ne pas générer les boutons item précédent et item suivant ;
  • Implémentation d'une méthode permettant de définir l'activation de la lecture ;
  • Implémentation d'une méthode permettant de définir le panneau affiché à l'état initial ;
  • Implémentation d'une méthode permettant de personnaliser les éléments d'accès direct aux panneaux.

Externalisation des textes et des images utilisés pour le carrousel.

La mise en place du carrousel et les méthodes sont désormais documentées sur ce document.

Modifications du 13 août 2014 (version expérimentale)

  • Substitution des propriétés aria-controls par des attributs data-controls ;
  • Modification de l'implémentation des info-bulles sur certains éléments ;
  • Implémentation d'un message d'aide aux utilisateurs clavier ;
  • Implémentation d'un raccourci clavier d'accès au panneau courant depuis l'élément qui lui est associé.

Des commentaires ? Des interrogations ?

Vous avez des commentaires ou interrogations sur cette implémentation, vous pouvez directement me contacter via Twitter.

Implémentation

HTML

Intégrer la source HTML suivante à l'endroit où doit se trouver le carrousel dans votre document :

<div data-custompattern="carrousel">
	<div>
		<h1>Panneau 1</h1>
		...
	</div>
	<div>
		<h1>Panneau 2</h1>
		...
	</div>
	<div>
		<h1>Panneau 3</h1>
		...
	</div>
</div>

Notes sur cette source

Des identifiants et des classes peuvent être ajoutés sur ces éléments par vos soins et selon vos besoins.

Les premiers titres rencontrés dans chaque panneau doivent être respectueux de la structure de votre document (le carrousel s'adaptera), sont requis car utilisés comme intitulés de certains éléments du carrousel et peuvent être masqués (ni par display ni par visibility) par vos soins et selon vos besoins.

Modification de cette source pour personnalisation du carrousel

Vous pouvez personnaliser le carrousel en ajoutant à l'élément div[data-custompattern="carrousel"] un ou plusieurs des attributs data-* définis dans le tableau ci-dessous.

Personnalisation du carrousel
Attribut Explication Valeurs
data-ariacontrols (implémentée et vouée à disparaître) Utilisation des propriétés aria-controls pour lier les éléments d'accès direct aux panneaux.
Note : la version 15 de JAWS s'appuie sur ces propriétés pour proposer un raccourci clavier inopérant qui doit permettre d'aller directement aux panneaux.
  1. Valeur true (par défaut) : les propriétés aria-controls sont utilisées ;
  2. Valeur false : les propriétés aria-controls ne sont pas utilisées.
data-duration (implémentée) Définition de la durée entre chaque changement de panneau du carrousel. Valeur n (où n est un entier positif) correspondant à la durée en millisecondes.
data-help (implémentée) Utilisation d'un message d'aide pour expliquer les interactions lors d'une navigation au clavier.
  1. Valeur true : le message d'aide est utilisé ;
  2. Valeur false (par défaut) : le message d'aide n'est pas utilisé.
data-navbuttons (implémentée) Définition de la présence des boutons précédent et suivant du carrousel.
  1. Valeur true (par défaut) : les boutons précédent et suivant sont présents ;
  2. Valeur false : les boutons précédent et suivant ne sont pas présents.
data-play (implémentée) Activation de la lecture pour le carrousel.
  1. Valeur auto : la lecture est automatiquement activée ;
  2. Valeur demand : la lecture doit être activée par l'utilisateur ;
  3. Valeur none (par défaut) : la lecture est désactivée.
data-playmode (implémentée) Définition du mode de lecture à utiliser pour le carrousel.
  1. Valeur restart (par défaut) : retour direct au premier panneau ;
  2. Valeur reverse : retour au premier panneau en passant préalablement par les panneaux intermédiaires.
data-selectedpanel (implémentée) Définition du panneau à afficher à l'état initial du carrousel.
  1. Valeur first (par défaut) : le premier panneau est affiché ;
  2. Valeur n (où n est un entier positif) : le nième panneau est affiché ;
  3. Valeur last : le dernier panneau est affiché.
data-tabs (implémentée) Définition de la présentation des éléments d'accès direct aux panneaux du carrousel.
  1. Valeur text : les éléments d'accès direct sont présentés par des chiffres et des nombres ;
  2. Valeur dots (par défaut) : les éléments d'accès direct sont présentés par des points.

Javascript

Intégrer le script "carrousel.js" à votre document via l'élément script en fin d'élément body : <script type="text/javascript" src="carrousel.js"></script>

Le script se chargera alors de la génération des éléments et de l'application d'événements spécifiques pour chaque carrousel défini dans votre document.

Vous pouvez personnaliser les images utilisées pour le carrousel en modifiant les chemins écrits dans l'objet stocké dans la variable carrouselssrc :

var carrouselssrc = {
	selectedtab: ['client/images/notselected.png', 'client/images/selected.png'], 
	previoustab: ['client/images/previousdisabled.png', 'client/images/previous.png'], 
	nexttab: ['client/images/nextdisabled.png', 'client/images/next.png'] 
};