Conseil n°5 : décrire les images 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 par le visuel uniquement (dans les images par exemple) risque d'être perdue pour ceux qui ne sont pas en mesure de prendre connaissance du contenu des images dans la page (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 recevoir une description textuelle. Ce texte descriptif viendra ainsi en alternative pour tous ceux qui ne "voient" pas les images.

Note : les spécifications du HTML indiquent que toute image doit être décrite. Aussi, dans le cas des images qui n'ont qu'une fonction purement décorative (et ne nécessitent donc pas de description particulière), il faut leur adjoindre une alternative textuelle vide.

Le principe de la description sous forme de texte s'applique également aux éléments multimédia 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.

Exemple

Pour les images :

Capture d'écran : sur l'image qui représente un logo, l'alternative textuelle décrit ce que réprésente cette image.

Pour les vidéos :

Capture d'écran : vue d'une page web où une vidéo est immédiatement suivie par un lien d'accès à la transcription textuelle.

Bénéfices pour l’internaute déficient visuel

  • 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.  

Boite à 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.