UX/UI - L'accessibilité, c'est pas sorcier !

Conférence présentée par Fanny DEMEY et Gérard Paligot.

Cette conférence concernait l’accessibilité sur nos smartphones et tablettes pour les utilisateurs d’Android.

Je ne connais pas le code pour Android, donc je n’ai pas pu relever les détails techniques. J’ai toutefois trouvé la conf très accessible pour les non-dev Android !

Rappel des différents types de handicaps :

• Moteur
• Auditif
• Cognitif
• Visuel

Dans le cas du handicap visuel, il peut y avoir différentes choses :

• la non-voyance
• le daltonisme
• la DMLA
• la rétinite pigmentaire
• le glaucome

Sur Android, TalkBack (par Google), permet de naviguer avec un lecteur d’écran.

Pour naviguer, l’utilisateur fait glisser son doigt vers le haut, le bas, la droite, la gauche. Glisser le doit vers la droite ou la gauche permet par exemple de naviguer d’un élément à l’autre d’une liste.

Lors de la démo, on est sur une appli de e-commerce.

Lorsqu’on passe sur un bouton-icône ou une image, le lecteur d’écran n’a pas assez d’informations (ou on n’a pas celles qu’il faudrait et on a trop d’information). On peut alors lui ajouter un contentDescription.

Pour les infos, il faut être succint, ne pas se répéter (on peut aussi passer à “null” et faire une description à côté), et enfin il faut indiquer quelle action on va avoir.

On voit aussi un bouton ”+” qui va permettre d’ajouter le nombre souhaité (exemple : 3 packs d’eau). Problème : lorsqu’on clique sur ce bouton, on n’entend pas l’évolution de la quantité du produit.

Pour gérer cela, on peut utiliser stateDescription, qui va permettre d’indiquer la nouvelle quantité suite au clic sur le ”+“.

A côté du produit, nous pouvons voir aussi des étoiles qui représentent les avis de 42 utilisateurs, avec une moyenne de 4.5/5 (4 et demi sur 5). Problème : le lecteur d’écran va voir des images et une division. Il ne comprend pas le bon sens du texte.

Pour régler ce problème, Modifier.semantics à la rescousse !

Autre souci : l’utilisateur peut finir par avoir beaucoup de “clics” à faire pour naviguer dans la page. On peut alors regrouper les éléments qui sont liés, afin de les limiter. Nous voyons ensuite l’exemple d’un bouton d’action “écrire un nouveau message” qui est positionné tout en bas de l’écran, et qui, dans le code, se trouve à la fin. Le lecteur d’écran va mettre beaucoup de temps à le trouver. On peut dans ce cas, le gérer en indiquant “si TalkBack est activé, alors positionner ce bouton avant le reste”.