Conseil et audit en accessibilité numérique et ergonomie IHM

Cas concrets

Voici quelques exemples non exhaustifs de problématiques liées à l'accessibilité numérique.

Problématique des images

Les personnes ayant une déficience visuelle importante ou totale utilisent un lecteur d'écran. Cet outil va vocaliser le contenu du site Web. Il est donc primordial que tout le conteu porteur d'informations soit disponible pour les lecteurs d'écran.

Cela peut poser problème pour les images : si leur contenu informationnel n'est pas présent ailleurs dans le texte du site, il risque de ne pas être tranmis à l'utilisateur.

C'est pourquoi il est impératif de remplir, dans le code html, l'attribut alt en indiquant les informations nécessaires

Exemple d'image porteuse d'information

En page d'accueil, j'ai présenté une image représentant la conception d'un site Web. J'ai indiqué sous cette image les concepts présents, donc je ne les ai pas repris dans l'attribut alt puisqu'ils sont présents dans le texte. En revanche, une information visuelle est présente dans l'image mais pas dans mon descriptif, et elle me semble importante à préciser : la source de cette image. J'ai donc écrit le code html suivant pour cette image en page d'accueil :

alt="Schéma représentant la conception d'un site Web, repris de "UX DESIGN & ERGONOMIE DES INTERFACES 7è édition", Jean-François NOGIER, éditions Dunod"

A l'inverse, pour une image décorative, il est important de ne pas décrire l'image, sinon du contenu audio sera retranscrit sans apport intéressant pour l'utilisateur (et lui faisant potentiellement perdre du temps et lui donnant l'envie de quitter le site...).

Dans ce cas, il est primordial d'indiquer un alt vide sous cette forme alt=""

Exemple d'image décorative

En page d'accueil, plusieurs images sont présentes visuellement (version ordinateur) mais ignorées par les lecteurs d'écran. C'est par exemple le cas lorsque j'aborde le risque de sanctions importantes, imagée avec marteau de juge. J'ai alors indiqué: alt=""

Si aucun attribut alt n'est présent, le lecteur d'écran risque de lire la source de l'image, qui peut parfois correspondre à une série de chiffres interminable...

Il est donc important de mettre un alt, qu'il soit vide (images décoratives) ou rempli (images porteuses d'informations).

Je vous invite à consulter l'article que j'ai eu le plaisir de co-écrire avec Rita CUZZUPI et Christine LANGLAIS, qui aborde les problématiques liées au SEO et à l’accessibilité numérique, notamment autour de la question des images présentes dans les sites Web : Article SEO et accessibilité numérique.

Utilisateurs ayant des tremblements

Certaines personnes ne peuvent pas utiliser la souris pour naviguer sur le Web; cela peut par exemple être le cas de personnes ayant la maladie de Parkinson : les tremblements des membres supérieurs provoquent une imprécision telle qu'elles n'arriveront pas à cliquer où elles le souhaitent.

Pour surfer sur le Web, ces personnes doivent pouvoir naviguer au clavier. Cela signifie qu'elles doivent pouvoir atteindre et activer tout élément interactif du site en utilisant uniquement le clavier.

Malheureusement, la plupart des sites Web n'ont pas prévu cette utilisation.

Exemple de site Web ne permettant pas une utilisation complète au clavier

Sur le site Web d'un village proche de mon domicile, si j'utilise la souris, je peux ouvrir les sous-menus en passant la souris au-dessus des onglets (par exemple, quand je survole l'onglet "Environnement", le sous-menu s'ouvre et je peux cliquer sur "CCFF", "Gestion des déchets", etc.).

Quand j'utilise uniquement le clavier, je peux théoriquement me déplacer d'élément interactif en élément interactif avec la touche Tab, et activer ces éléments avec la touche Entrée ou la touche Espace. Sur le site de ce village, je peux me déplacer d'onglet en onglet, mais quand j'essaye d'activer l'un d'eux (par exemple "Environnement"), rien ne se passe. Je n'ai donc pas accès aux sous-menus, ce qui me prive du contenu d'une partie conséquente du site Web.

On soulève ici un problème récurrent et critique, car il limite l’accès aux contenus pour de nombreux utilisateurs (c'est parfois la vaidation d'une démarche ou d'un panier qui est impossible).

Aussi, dans cet exemple, quand on tabule, on ne sait absolument pas où on se trouve (on parle de focus non visible). Mais là, on touche un autre problème d'accessibilité...

Et les outils de surcouche ?

Je vais être catégorique sur ce sujet : je préconise de ne pas les utiliser !

Certains pensent faire une bonne action en les utilisant, mais ces outils viennent en général à l'encontre des outils d'assistance utilisés par certaines personnes.

D'ailleurs, la Commission Européenne a été très claire à ce sujet, en indiquant qu'aucun de ces outils ne peut se substituer à la prise en compte de l’accessibilité dans la conception des sites, et qu'elle n’approuve pas ces outils : Article DesignGouv .

Exemple d'outil de surcouche :

Exemple d'impact négatif d'un outil de surcouche

Bien souvent, quand on augmente la taille de police avec un outil de surcouche, le contenu du site se positionne mal et devient moins voire pas lisible (contenu qui sort de l'écran).

J'ai fait le test sur plusieurs sites et j'ai obtenu à chaque fois le même résultat : en zoomant via le clavier (Touche Ctrl et touche +), le contenu s'agence bien et reste lisible, alors qu'en utilisant l'outil de surcouche proposé sur ce site, le texte devient beaucoup moins lisible.

On peut constater ce phénomène sur les 2 captures d'écran d'un autre site Web ci-dessous :

Visuel avec Zoom via l'outil de surcouche

Visuel avec Zoom au clavier