Comment rendre un carrousel accessible

Bonjour,

Je me pose souvent des questions sur l'accessibilité... auxquelles je n'ai malheureusement pas de réponses. Je suis actuellement en train de (re)faire la navigation au clavier de la page d'accueil du blog dont je m'occupe. Celle-ci contient notamment 3 carrousels... ce qui ne va pas sans poser de problèmes.

J'ai donc quelques questions :

1. D'abord les liens précédent/suivant : devraient-ils être inclus dans la navigation au clavier par la touche "tab" ? (Actuellement, ils ne le sont pas sur mon blog, car ils sont ajoutés dynamiquement via javaScript pour éviter de se retrouver avec des boutons inutiles si javaScript est désactivé.)
Si oui, où les placer ? Je me dis par exemple que l'utilisateur d'un lecteur d'écran n'a sans doute aucun intérêt à arriver sur un lien "précédent" concernant un contenu qui se trouve en-dessous, et dont, par conséquent, il n'a pas encore connaissance... Mais peut-être que je raisonne mal ? J'ai du mal à me représenter les choses.

2. Comment indiquer à certains utilisateurs (je pense, là encore, à ceux qui utilisent un lecteur d'écran, par exemple) qu'ils naviguent sur un élément d'un carrousel ? Mon indication "(1/3)" est-elle par exemple suffisante ?

3. Quelles touches devraient être prévues pour utiliser le carrousel ? J'ai prévu actuellement (en tout cas, c'est en cours ) l'utilisation des touches "flèche gauche", "flèche droite", "Début" et "Fin"... Mais quelles sont les habitudes de la majorité de ceux utilisant la navigation au clavier ? J'ai du mal à trouver des infos là dessus. Vaudrait-il mieux prévoir aussi "Page up" et "Page down" ?

En bref, comment concilier carrousel et accessibilité ? Toutes vos remarques là dessus seront les bienvenues. Merci d'avance !
Modifié par Fix (14 Apr 2012 - 13:47)

a écrit :
1. D'abord les liens précédent/suivant : devraient-ils être inclus dans la navigation au clavier par la touche "tab" ? (Actuellement, ils ne le sont pas sur mon blog, car ils sont ajoutés dynamiquement via javaScript pour éviter de se retrouver avec des boutons inutiles si javaScript est désactivé.)
Si oui, où les placer ? Je me dis par exemple que l'utilisateur d'un lecteur d'écran n'a sans doute aucun intérêt à arriver sur un lien "précédent" concernant un contenu qui se trouve en-dessous, et dont, par conséquent, il n'a pas encore connaissance... Mais peut-être que je raisonne mal ? J'ai du mal à me représenter les choses.

Bien sûr qu'il faut qu'ils soient accessibles au clavier. Après, les boutons précédent/suivant avant ou après les contenus, c'est un peu égal, parce qu'on voit autant l'un que l'autre.
Par contre il faut absolument que le défilement automatique et/ou les changements automatiques de pages soient désactivables, pour laisser le loisir à l'utilisateur de lire les contenus dynamiques au rythme qu'il veut.

a écrit :
2. Comment indiquer à certains utilisateurs (je pense, là encore, à ceux qui utilisent un lecteur d'écran, par exemple) qu'ils naviguent sur un élément d'un carrousel ? Mon indication "(1/3)" est-elle par exemple suffisante ?

Les utilisateurs très débutants ne comprendront peut-être pas "1/3". Le cas échéant, n'hésite pas à utiliser des indications plus explicites, p.ex. "page 1 de 3". Cela dit, les contenus fractionnés en pages sont courants sur le web, donc ça ne devrait pas être un gros problème.

a écrit :
]3. Quelles touches devraient être prévues pour utiliser le carrousel ? J'ai prévu actuellement (en tout cas, c'est en cours ) l'utilisation des touches "flèche gauche", "flèche droite", "Début" et "Fin"... Mais quelles sont les habitudes de la majorité de ceux utilisant la navigation au clavier ? J'ai du mal à trouver des infos là dessus. Vaudrait-il mieux prévoir aussi "Page up" et "Page down" ?

Là par contre tu fais fausse route: ces touches ont des autres fonctions normalement. IL ne faut pas perturber l'utilisateur en assignant des fonctions customisées à des touches qui ont normalement un fonctionnement différent.

Tu ferais une application bureautique, je te dirais oui, c'est excellent de penser à ces touches. Mais sur le web, en matière de touches de raccourcis, ce que tu peux faire dans les règles de l'art est très limité. Je te suggère donc de ne rien prévoir à ce niveau ici.

Merci pour ta réponse !

QuentinC a écrit :
les boutons précédent/suivant avant ou après les contenus, c'est un peu égal, parce qu'on voit autant l'un que l'autre.

C'est que je comprends mal le fonctionnement : un utilisateur de lecteur d'écran peut donc utiliser un bouton "document suivant", qui fasse défiler le contenu AU DESSUS, et lire ce contenu quand même ? Puis revenir au bouton "suivant" par la suite ?

QuentinC a écrit :
il faut absolument que le défilement automatique et/ou les changements automatiques de pages soient désactivables

Pas de défilement automatique sur mon blog, donc pas de problème à ce niveau-là.

QuentinC a écrit :
Là par contre tu fais fausse route: ces touches ont des autres fonctions normalement.

De quelles touches parles-tu ? Uniquement de Page Up/Page Down, ou également des touches flèches droite et gauche ? Comme tu dis qu'il vaut mieux ne "rien prévoir à ce niveau", j'ai un doute...

Question subsidiaire : comment gérer au mieux l'accessibilité du carrousel, lorsque le bouton précédent est à gauche du carrousel (donc accessible avant le carrousel lors d'une navigation au clavier) et que le bouton suivant est à droite (donc accessible seulement après avoir passé tous les éléments du carrousel avec la touche "tab") ?
Modifié par Fix (11 Mar 2012 - 13:26)

Il sera peut-être plus facile de donner un avis sur des exemples concrets : sur la page d'accueil du site dont je m'occupe se trouvent trois carrousels : un pour les éditos, un pour les événements de l'agenda, et un dernier pour les couvertures de livres ayant reçu des commentaires.

Ces carrousels vous semblent-ils accessibles ? Ils peuvent être manipulés par les touches du clavier (flèches droite et gauche, et touches Début et Fin) ou à la souris... Voyez-vous des améliorations à y apporter ?

Tous les avis sont les bienvenus !

Hello,

Je ne suis pas convaincu par l'intérêt de ton dispositif, à part peut-être pour un public tout spécialement formé à l'utilisation de ce site (ce qui peut être le cas ici). Je ne crois pas que l'utilisation du pavé directionnel dans ce contexte soit suffisamment standard et surtout compréhensible pour être vraiment utilisable. Sans compter les risques de télescopage avec d'autres utilisation de ces touches mentionnés par Quentin ! Je crois que ce serait le même problème avec les autres touches comme page up/down…

Pour les news par exemple, rien ne me permet de savoir que le focus sur le titre de la news me permet d'utiliser mon pavé directionnel pour déplacer le carrousel. Du coup, je ne vois pas pourquoi tu n'utilises pas un système plus intuitif : deux boutons suivant/précédent que l'on contrôle avec la touche enter (même si ce n'est pas parfait non plus : cf Quentin).

De plus, l'aide du site propose des informations sur les flux RSS (ce qui est normal), mais rien concernant ton système de navigation au clavier… il me semble que ce serait indispensable d'avoir une aide spécifique si tu souhaites conserver ce système.

Désolé pour cet avis plutôt négatif, il faudrait attendre l'avis d'autres intervenants du forum. Peut-être que des aspects plus positifs m'ont échappé
Modifié par audrasjb (19 Mar 2012 - 09:05)

Merci pour cet avis détaillé !

On trouve peu d'exemples de carrousels accessibles sur le Web. En voici un : Accessible jQuery-ui Components Demonstration. Il utilise les flèches droite/gauche pour permettre la navigation au clavier d'une image à l'autre. Cela me paraissait "simple" et suffisamment intuitif...

Il est clair, néanmoins, qu'il faut que j'ajoute aussi la possibilité de contrôler le carrousel par l'appui sur la touche "Enter" lorsque le focus se trouve sur les liens précédent/suivant.
Il est clair également qu'il faut que je complète la page d'aide du site. Merci de m'y avoir fait penser

Est-ce que l'ajout d'une phrase au dessus du carrousel pour expliquer que la navigation au clavier est possible à l'aide des flèches du pavé directionnel serait un compromis satisfaisant ? Lorsque QuentinC disait que ces touches avaient une autre utilité, il me semblait qu'il s'agissait simplement des touches "PageUp"/"PageDown"... Je me trompe ?

a écrit :
il me semblait qu'il s'agissait simplement des touches "PageUp"/"PageDown"... Je me trompe ?

espace ,shift ,ctrl ,fleche ,droite ,gauche, haut, bas, page haut, page bas (non non pas de vie illimité ou quoi que ce soit ) toutes ces touches sont utiles, et encore là on parle des réglages par défaut, les utilisateurs peuvent choisir leurs propres touches. en règle générale ce n'est pas une bonne pratique que de remaper des touches.

Je crois que c'est clair, donc : je dois revoir ma copie

Mais je trouve *beaucoup* de scripts jQuery qui se disent accessibles tout en utilisant (voire parce qu'ils permettent d'utiliser) les flèches droite/gauche, par exemple (y'a qu'à voir ici... ou ailleurs !)
Modifié par Fix (23 Mar 2012 - 06:28)

C'est fait : j'ai essayé de suivre au mieux les conseils qui m'ont été donnés. J'ai donc supprimé l'utilisation des touches (flèches, home, end), et j'ai rendu accessible au clavier les boutons "Précédent" et "Suivant".

Pour y parvenir, j'ai dû mettre "en dur" dans le code HTML les boutons "Précédent" et "Suivant" de chaque carrousel. Du coup, quand on désactive les CSS, on se retrouve avec deux liens inutilisables... mais j'imagine qu'il n'y a pas de solution parfaite !

Que dites-vous, désormais, de l'accessibilité des carrousels présents sur ma page d'accueil ?

Edit : je considère ce sujet comme résolu. Merci à ceux qui y ont participé.
Modifié par Fix (25 Mar 2012 - 09:58)

Bonjour,

Je rouvre : j'ai lu diverses choses ces temps-ci sur le sujet, qui manquaient cruellement d'explication et, du coup, m'interpellent un peu...

1. J'ai lu qu'un preventDefault(); sur les boutons "précédent" et "suivant" du carrousel était préférable à un return false,... sans la moindre explication. Quelqu'un en aurait-il une ?

2. Surtout, j'ai lu (sans pouvoir retrouver où, mais il me semble bien que c'était sur ce forum) qu'un élément de type button (toujours pour les boutons "précédent" et "suivant") était préférable, pour des questions d'accessibilité, à des liens avec un preventDefault(); dessus. Là encore, quelqu'un pourrait-il m'expliquer pourquoi ?