Alternative textuelle des images mettre des "alt" partout ?

Les pages sont aujourd’hui composé de nombreux contenus riches (images, vidéos, animations, applications, … ). Ces éléments améliorent souvent l’expérience utilisateur. Malheureusement, de nombreux internautes ne peuvent accéder à ces contenus riches. Il convient de fournir des informations textuelles qui pourront être comprise par tout le monde.

L’altitude : le nouveau syndrome du Web

Le premier élément auquel on pense quand on parle d’alternative textuelle est l’attribut alt. Malheureusement, elle est souvent mal utilisé. L’attribut n’as de sens que pour les images véhiculant une information. Les images décoratives doivent impérativement avoir un attribut alt vide.

Une image n’a pas besoin de cette méta-données dans le cas où le contexte adjacent le donne. Donc, le fait de renseigner où non la valeur de l’attribut alt dépend du contexte dans lequel l’image est utilisé. Ainsi, la même image utilisée à 2 endroits différents nécessitera dans un cas, une alternative textuelle, dans l’autre cas non.

Exemple : Une poignée de main historique

Prenons la poigné de main historique entre Itzhak Rabin et Yasser Arafat, en 1993.

On aurait tendance à écrire un code HTML du genre.

<h1>Une poignée de main historique, celle que s'échangent Itzhak Rabin et Yasser Arafat, en 1993.</h1>
<img src="http://truffo.fr/wp-content/uploads/2009/05/arafat40.jpg"
    alt="Une poignée de main historique, celle que s'échangent Itzhak Rabin et Yasser Arafat, en 1993."
/>
Historique, les dirigeants des 2 pays se sont serrés la main à l'occasion du ...

Dans ce cas de figure, l’alternative textuelle introduit une redondance dans l’information qui n’est pas utile pour la compréhension du texte. Le contenu adjacent se suffit à lui-même pour la compréhension de l’article. L’alternative textuelle peut même être perturbant pour la compréhension. Il est donc plus correct d’écrire :

<h1>Une poignée de main historique, celle que s'échangent Itzhak Rabin et Yasser Arafat, en 1993.</h1>
<img src="arafat-rabin.jpg" alt=""/>
<p>Historique, les dirigeants des 2 pays se sont serrés la main à l'occasion du ...<p>

Exemple : un portfolio

Sur le même site, on trouve une portfolio d’image montrant toutes les images sur cette thématique. L’image n’est plus dans son contexte. L’alternative textuelle devient nécessaire. On aura donc :

<img src="arafat-rabin.jpg"
   alt="Une poignée de main historique, celle que s'échangent Itzhak Rabin et Yasser Arafat, en 1993."
/>

L’attribut alt, c’est comme les anti-biotique, c’est pas automatique.

LinkedIn
Reddit

Voir aussi

A la une
  • Rencontre du numérique 2019 - Nîmes
  • référencement naturel d'un hôtel
  • Développeur eZ Platform
  • Tech lead Symfony
  • Expert Qualité Web

Copyright - Sylvain FIX

2009 - 2019