Garçon devant un ordinateur.jpg
Hollie Little Pink Laptop.jpg
À propos • Aide • Le Livre d'or
Les lecteurs de Vikidia demandent des articles en plus. Voyez la liste d'articles à créer, et venez nous aider à les rédiger !

Alternative textuelle

Une page de Vikidia, l’encyclopédie junior
Aller à la navigation Aller à la recherche
Avec affichage de l’image Sans affichage de l’image
Des lentilles de trois variétés : l’une rouge et petite, l’autre jaune et moyenne, la dernière verte et grosse.
Les variétés de lentilles cultivées peuvent avoir des couleurs et des tailles variées.
Des lentilles de trois variétés : l’une rouge et petite, l’autre jaune et moyenne, la dernière verte et grosse.
Les variétés de lentilles cultivées peuvent avoir des couleurs et des tailles variées.

Une alternative textuelle est, sur une page Web ou dans un document numérique (wp), un texte qui décrit une image ou une zone cliquable dans une image, pour que les personnes qui ne peuvent pas afficher ou voir l’image puissent quand même comprendre ce que le rédacteur de la page veut montrer. Ce sont deux pratiques obligatoires de l’accessibilité du Web (wp) que :

  1. de renseigner sur les sites Web des alternatives textuelles pour les images qui apportent un contenu ; et
  2. de signaler que l’image n’est pas nécessaire à la compréhension de la page sur toutes les autres images.

Cas d’usage[modifier | modifier le wikicode]

Les alternatives textuelles sont utiles essentiellement pour les personnes aveugles ou fortement malvoyantes (wp), puisqu’elles permettent aux lecteurs d’écran de décrire ce qui est représenté. Sur le Web, elles peuvent aussi servir1 :

  • aux personnes qui utilisent un navigateur Web en mode texte (wp) : le navigateur affiche alors l’alternative textuelle, et peut offrir la possibilité à l’utilisateur d’ouvrir l’image dans une visionneuse d’images (wp) externe ;
  • aux personnes ayant un mauvais accès à Internet (payant selon la quantité de données téléchargées, ou juste très lent ou saturé) : certains navigateurs Web permettent de ne pas afficher les images par défaut ;
  • dans le cas d’un problème de téléchargement de l’image : lorsque le contenu HTML de la page a été correctement téléchargé mais pas l’image, l’alternative textuelle peut être affichée à sa place par le navigateur.

Fonctionnement[modifier | modifier le wikicode]

L’alternative textuelle doit être une description de ce qui apparaît, plutôt courte et adaptée à ce qui intéresse le lecteur dans le contexte ; une image (ou une partie cliquable d’image) peut donc avoir des alternatives textuelles différentes selon la page qui l’affiche. Ce n’est pas la légende de l’image, et elle n’en répète pas le contenu : la légende est lisible par tout le monde, même par ceux qui affichent l’alternative textuelle au lieu de l’image.

L’emploi des alternatives textuelles est considéré obligatoire pour l’accessibilité (wp)w3 1,w3 2. Dans le cas où une image est juste décorative, l’alternative textuelle doit être vide. Toutes les autres images qui portent une information nécessaire ou complémentaire à la compréhension du texte doivent avoir une alternative textuelle. Quelques cas sont documentés comme « spéciaux » par les WCAG (les recommandations pour l’accessibilité du Web)w3 1 :

Un cercle formé de petits points de différentes couleurs, dans lequel une personne non daltonienne arrivera à lire un « 6 ».
La planche no 11 du test d’Ishihara, qui permet de tester le daltonisme. Ce genre de test n’a pas de sens si l’on utilise un lecteur d’écran, une bonne alternative textuelle dans la plupart des contextes serait donc « L’une des planches du test d’Ishihara ».
  • dans le cas où l’image est un test qui nécessite d’analyser l’image (par exemple, un test d’Ishihara, qui permet de détecter le daltonisme), alors il doit être précisé que l’image est présente pour un test visuel ;
  • les images CAPTCHA ne peuvent pas avoir une alternative textuelle complètement renseignée, sinon les robots s’en serviraient pour se faire passer pour des humains ; mais les images doivent quand même avoir une alternative textuelle qui indique qu’elles sont destinées à distinguer les humains des robots, et le site doit par contre offrir un moyen de montrer qu’on est humain aux personnes utilisant un lecteur d’écran ;
  • si l’image sert à faire interagir l’utilisateur (par exemple, une flèche de couleur), il doit être signalé comme un bouton ou avoir son « rôle » de précisé au lecteur d’écran, pour que celui-ci puisse le présenter de manière plus compréhensible.

Les vidéos ont des règles spécifiques d’accessibilité, plus complexe que la simple alternative textuellew3 1.

Technique en HTML[modifier | modifier le wikicode]

Dans une page en HTML, l’alternative textuelle est notée par l’attribut alt="". Elle peut être placée sur différentes balises, notamment :

  • la balise <img>, qui décrit une image complètew3 3,wg 1 ;
  • la balise <area>, lorsqu’elle sert pour délimiter une zone réactive dans une image (elle porte alors un attribut href=url : on peut donc la cliquer, par exemple)w3 4 et seulement dans ce cas làwg 2 ;
  • la balise <input> lorsqu’elle possède un attribut type="image", qui sert dans un formulaire quand on a à choisir des coordonnées dans une imagewg 3.

Exemple d’une alternative vide[modifier | modifier le wikicode]

Prenons comme exemple un bandeau comme celui-ci, sur un site comme Vikidia.

Cet article est très bien illustré !

L’image (le logo de Vikidia) n’apporte rien à la page ou au message, elle est juste décorative. Le code HTML désiré est donc : 

<div style="display:table;background-color:pink;margin:auto;width:40%;"> <!-- début du bandeau -->
<div style="display:table-cell;width:100px;text-align:center;">          <!-- début de la zone image -->
<img src="//download.vikidia.org/vikidia/fr/images/thumb/c/c7/VikidiaLogo1.gif/80px-VikidiaLogo1.gif"
     alt=""
     width="80"
     height="80">
</div> <!-- fin de la zone image -->
<div style="display:table-cell;text-align:center;">                      <!-- début de la zone texte -->
Cet article est très bien illustré&nbsp;!
</div> <!-- fin de la zone texte -->
</div> <!-- fin du bandeau -->

et le wikicode pour le générer sur un site MediaWiki pourrait être le suivant. 

<div style="display:table;background-color:pink;margin:auto;width:40%;">
<div style="display:table-cell;width:100px;text-align:center;">
[[Fichier:VikidiaLogo1.gif|alt=|link=|80px|class=noviewer]]
</div>
<div style="display:table-cell;text-align:center;">Cet article est très bien illustré !</div>
</div>

Sans la précision de ce alt=|, la plupart des moteurs de wiki mettent le nom de l’image en alternative, ce qui n’est pas ce qui est désiré.

Exemple d’une alternative remplie[modifier | modifier le wikicode]

Une alternative remplie permet de faire comprendre le contenu de la page, pour les personnes qui ne voient pas l’image. Prenons par exemple l’image suivante, avec une légende courte mais qui est cependant suffisante pour des personnes qui voient l’image.

Quatre pommes empilées dans une assiette, l’une bien verte (Granny Smith), l’autre plutôt jaune, l’une rouge teintée de jaune et la dernière rouge foncé.
Quatre pommes.

L’alternative doit être courte également, mais elle va dépendre du contexte :

  • sur un article d’encyclopédie comme « fruit », ce qui est certainement recherché est de montrer à quoi ressemble une pomme en comparaison à d’autres fruits, une bonne alternative textuelle pourrait donc être : « Quatre pommes formant une pyramide dans une assiette, prêtes à être mangées. », qui montre à la fois la taille prise par le fruit et précise que le fruit se mange cru ;
  • sur un article d’encyclopédie comme « pomme », ce qui est certainement recherché est de montrer la diversité des couleurs des pommes en fonction de leur variété, donc une bonne alternative textuelle pourrait être : « Quatre variétés de pommes : l’une bien verte (Granny Smith), l’autre plutôt jaune, l’une rouge teintée de jaune et la dernière rouge foncé. », qui détaille les variétés.

Dans le premier cas, le code HTML recherché sera donc (sans les balises qui créent les cadres autour) : 

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Different_types_of_apples_%282%29.JPG/120px-Different_types_of_apples_%282%29.JPG"
     alt="Quatre pommes formant une pyramide dans une assiette, prêtes à être mangées."
     width="120"
     height="90">
/>
<p>Quatre pommes.</p>

et le wikicode pour le générer dans un site MediaWiki sera comme suit. 

[[Fichier:Different types of apples (2).JPG|vignette|centre|alt=Quatre pommes formant une pyramide dans une assiette, prêtes à être mangées.|Quatre pommes.]]

Références[modifier | modifier le wikicode]

W3C : WCAG[modifier | modifier le wikicode]

Les références suivantes sont en anglais. Elles viennent de documents publiés par la Web Accessibility Initiative (wp) (WAI, page principale), un groupe de travail du World Wide Web Consortium (wp) (W3C, page principale). Il s’agit :

  • soit des Web Content Accessibility Guidelines en version 2.1 (WCAG, page principale), publiées le 5 juin 2018, qui constituent le texte de référence pour le développement d’un site Web accessible ;
  • soit des Techniques for WCAG 2.1 (Techniques, page principale), un texte complémentaire mis à jour régulièrement, qui suggère des manières de s’assurer qu’un site Web est conforme aux WCAG.
  1. ↑ 1,0 1,1 et 1,2 (en) WAI, WCAG : Success Criterion 1.1.1 : « Non-text Content » . Mis en ligne le 5 juin 2018 , consulté le 25 décembre 2022.
  2. ↑ (en) WAI, Techniques : F65 : « Failure of Success Criterion 1.1.1 due to omitting the alt attribute or text alternative on img elements, area elements, and input elements of type “image” » . Mis en ligne le 24 décembre 2022 , consulté le 25 décembre 2022.
  3. ↑ (en) WAI, Techniques : H37 : « Using alt attributes on img elements » . Mis en ligne le 24 décembre 2022 , consulté le 25 décembre 2022.
  4. ↑ (en) WAI, Techniques : H24 : « Providing text alternatives for the area elements of image maps » . Mis en ligne le 24 décembre 2022 , consulté le 25 décembre 2022.

WHATWG.org[modifier | modifier le wikicode]

Les références suivantes sont en anglais. Elles viennent des documents publiés par le Web Hypertext Application Technology Working Group (wp) (WHATWG, page principale), qui est le groupe de travail qui élabore le standard HTML (HTML Living Standard, page principale).

  1. ↑ (en) WHATWG, HTML Living Standard : 4.8.3 : « The img element » . Mis en ligne le 21 décembre 2022 , consulté le 25 décembre 2022.
  2. ↑ (en) WHATWG, HTML Living Standard : 4.8.13 : « The area element » . Mis en ligne le 21 décembre 2022 , consulté le 25 décembre 2022.
  3. ↑ (en) WHATWG, HTML Living Standard : 4.10.5.1.19 : « Image Button state (type=image) » . Mis en ligne le 21 décembre 2022 , consulté le 25 décembre 2022.

Autres références[modifier | modifier le wikicode]

  1. ↑ Marie-Valentine Blond, Olivier Marcellin et Mélina Zerbib, Lisibilité des sites web, Eyrolles, 2011, p. 79.
Globe représentant Internet Portail d'Internet —  Tous les articles sur Internet, son histoire, le web, les sites internet et le réseau.
Récupérée de « http://fr.vikidia.org/w/index.php?title=Alternative_textuelle&oldid=1971034 »