Les pages sont aujourd’hui composé de nombreux contenus riches (images, videos, 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 tous 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 informations. 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é à 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 perturbante pour la compréhension. Il 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.
Articles liées
- Attributs "alt" et "title" sur les images : le choc entre référencement et accessibilité
- Renseigner les images dans le sitemap Google
- Attributs width et height sur les images
- Et vous savez vous faire des liens ?
- Étude de l’accessibilité d’eZ Publish
- Categories:
- Accessibilité
- Accessibilité, html, portfolio, RGAA, sémantique
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.
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 ?
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é.
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.
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.
« 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 !
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).
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.