Carrousel accessible : quel script ou bibliothèque choisir ? Réponse à cette question de ma FAQ/base de connaissance accessibilité Web personnelle tirée de la liste de discussion des experts du Groupe de Travail Accessiweb.
La question est :
"Je souhaite mettre en place un "carrousel" sur la page d'accueil d'un site. Quelqu'un peut-il me conseiller une bibliothèque pour cela ? Les contraintes :
- accessible (bien sûr),
- le contenu à faire défiler permet image + texte,
- possibilité de défilement automatique,
- base sur Jquery."
Réponses :
"Vu sur Twitter http://hanshillen.github.com/aegisdemo/ et cliquer sur Carousel (le lien/ancre direct ne fonctionne pas ...) L'automatisation demande bien entendu un (ou deux) contrôles supplémentaires pour Pause/Play et la gestion du défilement automatique, mis en pause ou relancé et de la pause lorsque la souris survole une "zone active". Pour inciter tout le monde à visiter cette page, il y a donc 14 widgets d'usage assez classique utilisant jQuery et rendus accessibles au clavier avec support d'ARIA. Les widgets sont :Plus récemment, 6 widgets similaires ont été "accessibilisés" mais cette fois pour la bibliothèque Mootools : http://www.accessiblemootoolsdemo.iao.fraunhofer.de/Mootools_Widgets/index.html."
- Slider accessible
- Progress bar (barre de progression) accessible
- Menubar (barre de menu) accessible
- Buttons (boutons) accessibles
- Dialog (boîte de dialogue) accessible
- Checkbox accessible
- Accordion (accordéon) accessible
- Tree accessible
- Carousel accessible
- Tabs (onglets) accessibles
- Tooltip accessible
- Autocomplete accessible
- Panel accessible
- Datepicker (calendrier) accessible
"Je suis tombé sur ceci dont je vous envoie l'adresse à toutes fins utiles : http://net.tutsplus.com/tutorials/javascript-ajax/building-an-auto-scrolling-slideshow-that-works-with-and-without-javascript/. Il manque par contre des contrôles pour interrompre le défilement."
"Sur ce site il y a pas mal de trucs, c'est bien expliqué et en général c'est plutôt accessible (mais je n'ai pas vérifier pour ce module là) : http://babylon-design.com/tutoriel-jquery-faire-un-carrousel/."
"Il existe aussi des solutions de carrousel en css uniquement (sur css play par exemple) :
Enfin, une remarque sur le carrousel JQuery :
"Je me souviens d'avoir croisé le plug-in jCarousel pour jQuery et d'en avoir gardé un souvenir mitigé : même s'il permet, entre autres, de configurer les boutons du carrousel (notamment pour éviter l'utilisation par défaut d'un div habillé d'une image d'arrière-plan gérée en CSS), le code source généré peut être source de casse-tête (div et classes en cascade, utilisation d'un attribut id non modifiable, voire d'attributs style contenant des déclarations CSS en ligne manquant de souplesse). Bref, je me demande s'il n'y aurait pas de la place pour le développement d'un plug-in jQuery accessible (à défaut de développement sur mesure, fût-il basé sur jQuery)."
Pour en savoir plus, les détails de la discussion complète sur le sujet : http://list.accessiweb.org/pipermail/liste_gta_list.accessiweb.org/2011-March/002190.html