Conseil n°6 : décrire les images porteuses d’information et fournir des transcriptions aux vidéos

Résumé

Aujourd’hui, les pages web sont majoritairement constituées de texte et d’éléments graphiques comme les images. Or, toute information véhiculée uniquement par le visuel (dans les images par exemple) est inaccessible pour ceux qui ne sont pas en mesure d’analyser ces images (les moteurs de recherche, les utilisateurs déficients visuels, les logiciels de reconnaissance vocale, les utilisateurs qui désactivent l’affichage des images dans leur navigateur…). Les images qui apportent une information nécessaire à la compréhension du contenu de la page doivent donc s’accompagner d’une description textuelle. Ce texte descriptif viendra ainsi en alternative pour tous ceux qui ne « voient » pas les images.

Note : dans le cas des images à vocation purement décorative (sans aucune fonction et ne véhiculant aucune information particulière), il faut qu’elles puissent être ignorées par les technologies d’assistance (comme un lecteur d’écran). Selon les types d’images, plusieurs techniques existent, comme par exemple celle de leur adjoindre une alternative textuelle vide.

Le principe de la description sous forme de texte s’applique également aux éléments multimédias comme les vidéos. Si, pour quelque raison que ce soit, un utilisateur ne peut pas visionner une vidéo (faible débit de connexion internet, manque de temps…), il doit pouvoir avoir accès à un contenu textuel qui contient tout ce qui est exprimé oralement ainsi qu’à toutes les informations (visuelles, de contexte) nécessaires à la compréhension de l’action.

Bénéfices pour les internautes

• Lorsque que le lecteur d’écran utilisé par une personne aveugle détectera une image porteuse d’information dans la page web, il vocalisera l’alternative textuelle, fournissant ainsi toute l’information véhiculée par l’image.
• Lorsque que le lecteur d’écran utilisé par une personne aveugle détectera une image dite « de décoration », l’alternative vide de cette image permettra au lecteur d’écran de ne pas signaler la présence de cette image à l’utilisateur et donc de ne pas interférer dans sa navigation avec des informations non utiles.  

Exemple

Pour les images :

Pour les vidéos :

Boîte à outils

La barre d’outils « Web Developer » sert à vérifier la présence et la pertinence d’éléments telles que les images sur une page web.