Accessibilité

Salut,

Je me demandais si tu pouvais jeter un œil au script que je mets au point concernant une future barre d'options pour wikimini. Il est actuellement actif sur la version beta.

Mon soucis est au niveau de l'accessibilité, domaine que je ne maîtrise pas du tout. Je pense qu'en l'état ce n'est pas manipulable au clavier. Si tu pouvais me faire un compte rendu sur ce qui ne vas pas, ça m'aiderait énormément.

Merci d'avance.

Edit : Tiens, l'extension Cite n'est pas installée. J'étais pourtant persuadé que si...

Dr Brains (discussion)‎

Oui mais n'oublie pas quand même s'il te plaît!

Lorangeo (discussion)‎

Hello,

J'aime bien le design et les icônes utilisées. :-) Concernant l'accessibilité, il y a un bon point : les icônes sont accessibles au clavier (du moins sous Firefox 3.5, je suis pas chez moi alors je peux pas tester le reste). Je ne peux actuellement pas non plus tester les alternatives textuelles sur les images (alt=) ; peux-tu me montrer le script utilisé ? Si le texte n'est pas associé aux icônes dans le code, un lecteur d'écran ne pourra pas restituer l'information, et au mieux lira le nom ou l'URL de l'image.

Le contraste entre l'icône non sélectionnnée et le gris léger de fond n'est probablement pas suffisant. Je t'en dirai plus plus tard, mais on peut déjà songer à rendre les icônes plus visibles.

Niveau ergonomie, c'est très bon :

les icônes sont suffisemment grosses, on les identifie bien
le texte explicatif qui s'affiche en-dessous au survol de l'icône est une très bonne idée
changer la couleur des icônes au survol, pour montrer que ce sont des boutons actifs, est une pratique assez répandue et efficace

On pourrait améliorer quelques petites choses. Les icônes pour régler la taille du texte vont plutôt dans l'ordre "+ - x", qui est plus habituel que "+ x -" : le bouton annuler est habituellement à la fin d'un groupe de boutons. Il manque un texte explcatif pour les icônes "+ - x".

Je t'en dirai plus une fois de retour en Suisse. Bon, je récupère mon oeil mainteant ! À +

Dodoïste (discussion)‎

Je suis assez d'accord sur le problème de contraste, mais c'est pour cela que je proposais plutôt quelque chose dans ce genre, c'est-à-dire sans le fond réservé aux autres menus. De cette manière, cela prendrait aussi un peu moins de place.

S'agissant de la fonction imprimer, ne vaudrait-il pas mieux utiliser le même lien déjà présent dans la "Boite à outils", dans le menu de droite? On l'enlèverait ensuite bien-sûr de ce menu pour ne conserver la fonction qu'à une seule place, c'est-à-dire en haut.

Lorangeo (discussion)‎

Concernant le bouton "imprimer", j'ai supposé que comme il y avait déjà un lien "version imprimable", il fallait un lien supplémentaire "imprimer". Cela dit, on peut mettre les deux ou ne mettre que "version imprimable". Ce n'est pas grand chose à modifier.

Pour les alternatives textuelles, j'ai fait attention à en mettre pour chaque image (sauf pour l'image "intercalaire"). Le script est dans MediaWiki:Wikimini.js (sur beta).

Pour le contraste des images non sélectionnées, c'est vrai que ce n'est pas top. Le fond gris clair je l'ai rajouté pour être raccord avec les autres cadres de la barre de droite. Peut-être qu'une bordure autour de l'image suffirait ? Sinon on peut éditer les images et les rendre moins claires ?

Pour le texte explicatif des icones +-x, c'est un bug que je dois corriger : en fait il y est, mais dès que tu cliques une fois sur le bouton, il n'apparaît plus. Par contre, je ne sais pas si le texte apparaît/disparaît lorsqu'on navigue au clavier : cette fonction est associée à des événements souris (onmouseover et onmouseout). Il faudrait peut-être les doubler par des événements clavier.

Dr Brains (discussion)‎

Bon, j'ai réglé le bug concernant les textes explicatifs qui disparaissent.

Par contre, comme je le pensais, ils n'apparaissent pas lorsqu'on navigue dessus au clavier. Je vais essayer d'arranger ça.

Dr Brains (discussion)‎

J'ai doublé tous les onmouseover et onmouseout par des onfocus et des onblur. A priori, ça semble marcher convenablement au clavier. J'ai bon ?

Dr Brains (discussion)‎

Et zut, avec les événements claviers, le bug est réappparu...

Dr Brains (discussion)‎

OK, c'est bon, j'ai utilisé une ruse de sioux : je me sert de l'attribut class des liens pour porter le texte à afficher et non plus du title qui devait être effacé et remis à chaque événement clavier/souris (pour que la pop-up n'apparaisse pas), tandis que c'est inutile avec la classe. C'est pas très orthodoxe, mais ça marche...

J'ai donné également une classe aux images et ai donc rajouté une bordure. Je ne sais pas si ça règle le problème de contraste mais ça rend les icônes plus visibles.

J'en ai profité pour ajouter le lien vers la version imprimable à côté de celui pour imprimer.

Dr Brains (discussion)‎

Hello. Désolé de répondre aussi tard. J'ai testé avec le lecteur d'écran Open-source NVDA (lien de téléchargement), et Color Contrast Analyser (lien de téléchargement) qui est gratuit. Je t'invite à les tester également.

J'ai regardé le script et ses alternatives textuelles sur les images, elles sont parfaites. NVDA a restitué correctement ces alternatives, comme prévu. Les boutons sont accessibles au clavier, c'est tout bon. :-)

Concernant le contraste entre les icônes et le fond, il est largement insuffisant. Et la version proposée par Admin ne change pas grand-chose. Le cadre gris n'est pas non plus beaucoup plus foncé, et ne change pas significativement la visibilité des icônes. Mais de manière générale, le cadre ne peut compenser le manque de visibilité des icônes : l'utilisateur ayant une déficience visuelle ne verrait alors que le cadre, mais pas ce qui est à l'intérieur. Il devinera qu'il y a probablement quelque chose à faire avec cette suite de carrés, mais sera contraint à procéder par tâtonnements. Rien ne remplacera efficacement des icônes plus foncées.

Voilà, l'essentiel est là. :-) Bonne continuation ! Rodan