Alternative textuelle des images mettre des "alt" partout ?

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.
comments powered by Disqus

Voir aussi

Accessibilité : qu'est que c'est ?

Accessibilité : qu'est que c'est ?

Accessibilité, voila un terme à la mode en ce moment. On le voit sur toutes les plaquettes des prestataires du Web. Chaque site y va de sa petite page …

XHTML : le grand raté du Web

XHTML : le grand raté du Web

Le langage XHTML devait remplaçer le HTML, or 8 ans après sa sortie. Le constat est sans appel, on utlise XHTML 1.0 dans l’une de ses variantes …

Les listes de définition : le parent pauvre du (X)HTML

Les listes de définition : le parent pauvre du (X)HTML

Les listes de définition sont généralement très peu utilisé sur les sites Web. On ne trouve pas cette fonctionnalité dans les différents éditeurs …

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