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 la balise 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.

Category: Accessibilité

Étiquettes : ,

- 29 mai 2009

Comments

  1. J’avais comme une « idée reçue » sur cet attribut, me laissant penser qu’il ne devait pas être vide pour que le document soit valide w3c.
    Va savoir d’où ca viens…

    Bon c’est bien beau mais pour le développeur que je suis cette révélation tardive ne change finalement pas grand chose, il faut surtout expliquer ca aux rédacteurs.

  2. C’est intéressant comme question.

    J’aimerai bien pousser la chose dans la pratique 🙂 :
    « L’alternative textuelle peut même être perturbante pour la compréhension… »
    « l’alternative textuelle introduit une redondance »

    je vois quelques effets de bord négatifs : poids de la page (et encore il faut bien doser…), indexation pour les moteurs de recherche (plus de bruit, de pollution)…

    Dans la pratique, quels inconvénients pratiques vois tu ?

  3. Les lecteurs d’écran ou tout autres dispositifs non graphique, vont en général lire le contenu de l’attribut alt. Ainsi, répéter 2 fois la même phrase de suite, ou plus généralement la même idée 2 fois de suite, n’apporte pas grand chose. Ainsi, répéter 2 fois la même phrase de suite, ou plus généralement la même idée 2 fois de suite, n’apporte pas grand chose. C’est dans ce sens que c’est pertubant.

    Par contre, l’attribut alt permettait de spécifier des synonymes et donc d’enrichir le vocabulaire de la page et de fournir une méta-données fiable pour l’indexation des images. Donc niveau référencement, ce n’est pas forcément la panacé.

  4. Réflexion intéressante ! Je me rend compte que je fait souvent cette erreur de dupliquer le texte déjà présent.

    Pour ton exemple de la poignée de mains, je me pose quand même la question de la description de la photo. En effet elle apporte un sens supplémentaire à l’article, que le texte ne décrit pas.
    Ne serait il pas judicieux de mettre dans l’attribut alt une phrase du type « Bill Clinton entourant la poignée de main d’Arafat et Rabin » ?
    Ainsi la personne ne pouvant pas voir la photo ne louperait pas l’information qu’elle véhicule, à savoir l’attitude des protagonistes.

  5. Ne serait il pas judicieux de mettre dans l’attribut alt une phrase du type “Bill Clinton entourant la poignée de main d’Arafat et Rabin” ?

    Cela dépend si dans le paragraphe qui suit l’image, on fait référence à cet information alors ce n’est pas utile, sinon oui.

  6. Performance Agile – accessibilité
    9 juin 2009 - 17 h 13 min

    « Alt, c’est comme les antibiotiques », bien résumé 🙂

    Plus sérieusement, les internautes non voyants disent eux-mêmes qu’il n’est pas nécessaire d’avoir de commentaire partout car la navigation en restitution non graphique est beaucoup moins rapide qu’en restitution graphique. Leur retour est toujours précieux : s’il est essentiel de parfaitement maîtriser les bonnes pratiques en matière de conception accessible à tous, il est tout aussi indispensable de tester nos réalisations auprès de véritables utilisateurs 🙂
    Pour terminer, n’oublions pas que les internautes non voyants utilisent majoritairement des plages braille 40 caractères, privilégions les commentaires courts !

  7. Tu as bien résumé la chose : une image ne doit être commenté avec un alt que si elle apporte quelque chose à l’article. Une image décorative n’apporte rien au contenu, donc un alt vide est souhaité (à mes yeux, l’idéal est l’usage des css et background).
    Sinon, j’avais été encouragé de mettre soit le caractère * ou bien espace pour un alt « vide ».

    Il existe aussi l’attribut trop méconnu longdesc qui sert au longue description de l’image, un alt dans son bon usage étant normalement limité en nombre de caractères (j’aurai dit inférieure à 32 caractères).

  8. Mettre soit le caractère * ou bien espace pour un alt « vide » est une pratique que j’avais entendu lorsqu’il existait encore des CMS (ou des configurations de CMS) qui obligé à remplir obligatoirement le champs alt avec une valeur non vide.
    On peut dire (du bout des lèvres) que c’était moins pire que mettre un alt du genre « petite puce bleu ».

    La limite de 32 caractères me permet quelque trop restrictive, 80 caractères me permet plus adaptés (et encore si on peut). pour moi, le « alt » doit l’information la plus importante contenu dans une image, le « longdesc » donne la description détaillé. On peut cependant regretter que seule Opera exploite cette attribut. Généralement, je préfère privilégié un contenu qui donne cette information directement, et qui rend ainsi la nécessité d’une alt et d’un longdesc nulle, ce n’est malheuresement pas possible dans tous les cas.

  9. Je ne suis pas tout à fait d’accord avec l’article : si une image est décorative elle devrait être forcément placée à partir du CSS, pour tout autre cas, insignifiante ou non elle fait partie du contenu et se doit donc d’être répertoriée, ne serait-ce que pour être prise en compte par Google.

  10. Tu te contredit dans ton message, une image insignifiante est une image de décoration, en tout cas, c’est la définition qu’en donne le W3C.

  11. La deuxième partie du message, « pour tout autre cas », parle des images de contenu, mais bref…

Laisser un commentaire

Your email address will not be published / Required fields are marked *