[Accessibilité Web] Bien écrire le texte alternatif des images

Savez-vous que le texte alternatif des images peut être utilisé par des logiciels d’assistance aux personnes ayant des défiances visuelles. Autrement dit, les logiciels de lecture d’écran vont lire le texte alternatif pour pouvoir décrire les images et photos.

Code HTML d’une image

Ce texte alternatif est un attribut HTML placé dans l’image. Voici un exemple typique de code HTML d’une image avec un le texte alternatif :

<img src="photo.jpg" alt="description de l'image" />

A titre d’information, avec WordPress cet attribut est présent dans le champ « alt text » lors de l’ajout d’une image.

Le texte alternatif d’une image

Mais il faut malgré tout respecter quelques bonnes pratiques pour que ça soit vraiment utile :

  • L’attribut ne doit pas commencer par « image de … » ou « photo de … ». Les lecteurs d’écran expliquent déjà qu’il s’agit d’une illustration
  • Le texte doit être bref
  • Le texte doit être suffisamment descriptif si l’image est importante pour comprendre le reste du contenu de la page web
  • L’attribut peut rester vide si l’image est utilisée pour le design du site.

Merci de respecter ces petits conseils pour faciliter la vie auprès de vos lecteurs.

Tagué:, , , , ,

Une réflexion sur “[Accessibilité Web] Bien écrire le texte alternatif des images

  1. eyecom 12 janvier 2014 à 11:28 Reply

    merci pour cette article et je doit dir que ces conseils on u un impacte majeur sur mon site qui étai au fond des résulta de GG après une refonte ou j’ai minimisè l’impacte de l’atribu alt
    merci

Votre commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l’aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l’aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l’aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l’aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s

%d blogueurs aiment cette page :