Bien utiliser le texte alternatif

Par WebAIM

Donner aux images un texte alternatif est la première chose à faire pour l'accessibilité. C'est également l'une des plus difficiles à bien faire. Les images au texte alternatif absent, incorrect, ou mal choisi sont malheureusement légion sur le web. Et comme beaucoup d'autres points concernant l'accessibilité, c'est un domaine où l'interprétation personnelle compte pour beaucoup. Cet article présente des exemples et, pour chaque exemple, le texte alternatif approprié tel que nous le dicterait notre expérience personnelle.

Contenu de l'article

  1. Les bases du texte alternatif
  2. Tout est dans le contexte
  3. Les images fonctionnelles
  4. Les images décoratives
  5. Les cas particuliers
    1. Les images utilisées comme boutons
    2. Les images réactives
    3. Les images découpées
    4. Les images d'arrière-plan
    5. Les logos
    6. Les images complexes
  6. Conclusion

Les bases du texte alternatif

Le texte alternatif offre une alternative textuelle au contenu non textuel d'une page web. Pour la brièveté de la discussion, nous ne parlerons ici que du contenu alternatif concernant les images, sachez toutefois que les mêmes principes s'appliquent aux médias, aux applets, et aux autres contenus web non-textuels.

Le texte alternatif a plusieurs rôles :

La nécessité du texte alternatif vient du fait que les ordinateurs et logiciels de revue d'écran ne peuvent pas analyser les images et déterminer ce qu'elles représentent. En tant que développeurs, nous devons présenter aux utilisateurs le CONTENU et la FONCTION des images utilisées dans le contenu en ligne.

Le texte alternatif peut être présent de deux manières :

L'attribut alt (parfois appelé balise alt, bien que ce soit techniquement incorrect) n'est donc pas le seul mécanisme permettant de fournir le contenu et la fonction de l'image. Cette information peut également être proposée par le texte situé près de l'image, ou ailleurs dans la page. Dans les cas où le contenu ne peut être résumé de manière suffisamment succincte, un lien et/ou un attribut longdesc peuvent pointer vers une page où une description plus complète est disponible.

Important

L'expression texte alternatif employée dans cet article désigne le contenu textuel d'une image, quel que soit son emplacement. Elle ne se limite pas au seul attribut alt de la balise image. Lorsque l'expression attribut alt sera utilisée, cela désignera cet attribut en particulier, lequel contiendra souvent le texte alternatif, mais pas exclusivement.

Toute image doit avoir un attribut alt. C'est une obligation du standard HTML. Les images sans attribut alt sont inaccessibles. En présence d'une image sans attribut alt, les logiciels de revue d'écran indiquent parfois les autres informations disponibles pour l'image (le nom du fichier, ses dimensions ou sa position dans la page) afin de proposer néanmoins quelque chose à leurs utilisateurs. Dans un grand nombre de cas, un attribut alt vide ou nul (alt="") suffit.

Tout est dans le contexte

Il est absolument indispensable de considérer le contexte et les conditions d'utilisation d'une image pour choisir son texte alternatif. Prenez cette image de George Washington, par exemple :

exemple d'image

Le texte alternatif de cette image peut être totalement différent suivant le contexte, comme démontré ci-dessous.

Note

Afin d'illustrer au mieux les principes, les images utilisées dans cet article ont pour texte alternatif « exemple d'image ». Néanmoins, le contenu de chacune d'entre elles est explicité par leur contexte.

Exemple 1

exemple d'image

De par son rôle de commandant en chef des forces américaines durant la guerre d'indépendance, et, par la suite, de président des Etats-Unis, George Washington est souvent surnommé « le père de sa patrie ».

Quel serait le texte alternatif le plus approprié pour cet exemple ?

  1. « Image de George Washington »
  2. « George Washington, le premier président des Etats-Unis »
  3. Un attribut alt vide (alt="") suffirait.
  4. « George Washington »

La première étape pour choisir le texte alternatif adapté à une image consiste à trouver si elle a une fonction ou si elle présente un contenu. Dans la majorité des cas, une image n'a de fonction que lorsqu'elle fait partie d'un lien. Déterminer si une image propose un contenu et, si oui, lequel, peut être beaucoup plus compliqué. Si le contenu proposé par l'image se trouve dans le texte entourant l'image, un attribut alt vide peut suffire. Dans l'exemple ci-dessus, l'image nous le présente comme étant George Washington. Elle n'a pas de fonction car il ne s'agit ni d'un lien ni d'une image cliquable.

Voici quelques règles importantes concernant l'attribut alt.

Important

L'attribut alt devrait typiquement :

  • Être précis et équivalent au contenu et aux fonctions de l'image.
  • Être court. Le contenu et la fonction (s'il y en a) de l'image doivent être présentés en quelques mots, aussi peu que possible. On peut néanmoins dans certaines situations aller jusqu'à une ou deux phrases courtes.
  • Ne PAS être redondant ou dupliquer le texte entourant l'image.
  • Ne PAS contenir « image de ... » ou « graphisme de ... ». C'est une précision totalement inutile généralement, et dans le cas d'une image porteuse de sens il est rarement utile de préciser qu'il est apporté par une image plutôt que par du texte.

Avec ces règles en tête, le choix numéro 4 (George Washington) semble le plus adapté. Le premier choix précise inutilement qu'il s'agit d'une image. Le choix numéro 2 apporte des informations non présentes dans l'image, informations que l'on retrouve dupliquées plus loin dans le texte. Le troisième choix (un attribut alt vide) ne convient pas parce que l'image propose une information non disponible dans le contenu proche.

Exemple 2

exemple d'image
George Washington

De par son rôle de commandant en chef des forces américaines durant la guerre d'indépendance, et, par la suite, de président des Etats-Unis, George Washington est souvent surnommé « le père de sa patrie ».

Quel serait le texte alternatif le plus approprié pour cet exemple ?

  1. « George Washington »
  2. Un attribut alt vide (alt="") suffirait.
  3. « Image »
  4. L'image n'a pas besoin d'un attribut alt.

Ici, le contenu de l'image est disponible dans son contexte et le meilleur choix est le numéro 2 (alt=""). Le premier choix dupliquerait l'information présentée. L'option numéro 3 apporte des informations supplémentaires mais inutiles. Quand à l'option numéro 4 (pas d'attribut alt), ce n'est jamais le bon choix -toute image doit avoir un attribut alt.

Exemple 3

exemple d'image
George Washington

Quel serait le texte alternatif le plus approprié pour cet exemple ?

  1. Un attribut alt vide (alt="") suffirait.
  2. « Article de Wikipédia sur George Washington »
  3. « Lire la suite »
  4. « George Washington »

Dans cette situation, l'image fait partie d'un lien. Lorsque c'est le cas, la fonction de l'image doit être présentée dans son texte alternatif, à l'intérieur du lien. Ici, l'image est le seul contenu du lien et rien d'autre n'indique sa fonction, l'attribut alt doit donc mentionner cette fonction. En conséquence, le choix numéro 2 est probablement le meilleur. Bien qu'ici les mots « George Washington » soient également présents dans le texte qui suit, cette répétition est nécessaire pour décrire avec précision la fonction du lien. Il serait d'ailleurs possible et plus adéquat d'inclure la légende de l'image dans le lien.

Le premier choix est à proscrire. Une image dans un lien ne devrait jamais avoir un attribut alt vide ou nul, hormis lorsque la fonction du lien est explicitée textuellement dans ce lien. Le logiciel de revue d'écran doit pouvoir annoncer quelque chose permettant d'identifier le lien. Souvenez-vous également que le lien peut être lu hors contexte. C'est une raison pour laquelle l'option numéro 3 n'est pas recommandée, ajoutée au fait qu'elle ne décrit pas correctement le contenu. Enfin, la dernière possibilité ne précise pas la fonction du lien tout en dupliquant les informations du texte disponible à proximité.

Autant que possible, évitez « lien vers » ou « cliquez ici pour » et les formulations de ce type dans l'attribut alt. Les logiciels de revue d'écran précisent s'il s'agit d'un lien, et pour les utilisateurs voyant les images cette précision ne devrait pas être nécessaire.

Exemple 4

exemple d'image

Dans ce tableau, l'artiste Emanuel Leutze structure sa composition à l'aide de lumière, de couleurs, de formes, de perspectives, de proportions, et de mouvements.

Quel serait le texte alternatif le plus approprié pour cet exemple ?

  1. « George Washington »
  2. « Tableau de George Washington »
  3. « Tableau de George Washington traversant la rivière Delaware »
  4. « Tableau classique dont la composition utilise les effets de lumière et de couleur. »
  5. « Tableau représentant George Washington traversant la rivière Delaware. Des vagues écumantes cernent le bateau sur lequel se tient George Washington, majestueux, regardant par-delà la tempête les rayons de soleil éclairant l'autre rive, où il conduit ses troupes fatiguées vers une nouvelle bataille ».

Comme précédemment, il nous faut déterminer si le contenu de l'image est disponible dans son contexte immédiat. Ce n'est pas le cas ici, du moins pas totalement. L'image ne fait pas non plus partie d'un lien. La situation est épineuse, et nous n'avons peut-être pas ici tout le contexte nécessaire pour faire le meilleur choix. Examinons néanmoins les options disponibles.

Le contenu de l'image n'est pas traduit par le premier choix (« George Washington »). Le fait qu'il s'agisse de George Washington n'est peut-être pas important dans cette situation. Le deuxième choix (« Tableau de George Washington ») pourrait convenir, mais il n'apporte que peu d'informations par rapport au choix précédent. Il peut néanmoins être approprié de préciser qu'il s'agit d'un tableau, et non d'une photo ou autre type d'image. Le troisième choix apporte plus de détails que les deux précédents et rend possible l'identification du tableau. Rappelez-vous que le texte alternatif ne sert pas qu'aux non-voyants. De nombreux autres utilisateurs pourraient comprendre qu'il s'agit de ce tableau grâce à une telle description, ce dont ils seraient incapables avec les seuls mots « George Washington ». Le choix numéro 4 pourrait être adéquat si l'image était là pour illustrer une technique artistique spécifique et si son contenu n'avait pas d'importance. La dernière option pourrait également convenir dans une analyse du tableau, mais elle est bien trop longue et littéraire pour être réellement utile. Toute cette prose serait bien plus adaptée dans le texte de la page. Dans l'hypothèse où la technique artistique de l'image n'est pas analysée, l'option numéro 3 serait donc la plus appropriée.

En un mot, tout est dans le contexte. Commencez par repérer le contenu et la fonction de l'image, analysez son contexte, et enfin seulement choisissez le texte alternatif le plus adapté.

Les images fonctionnelles

Les images ont parfois non seulement un contenu mais aussi une fonction importante, par exemple pour la navigation.

Exemple 5

exemple d'image

L'image « Produits » fait partie d'un bandeau de navigation.

Quel serait le texte alternatif le plus approprié pour cet exemple ?

  1. « Produits »
  2. « Lien vers les produits »
  3. Un attribut alt vide (alt="") suffirait car l'image ne propose pas de contenu.

Dans le cas présent, la première solution est la meilleure, car elle offre à la fois le contenu et la fonction de l'image. En effet, cette image contient le mot « Produits » et matérialise un lien vers la page des produits. L'image sera identifiée comme étant dans un lien, donc « Lien vers » dans l'option 2 est totalement inutile. Le choix numéro 3 est à proscrire car l'image est le seul contenu du lien. En règle générale, pour une image contenant uniquement du texte celui-ci convient parfaitement comme texte alternatif.

Exemple 6

Découvrez les éléments ayant marqués le mandat présidentiel de George Washington, page suivante.

exemple d'image

Quel serait le texte alternatif le plus approprié pour cet exemple ?

  1. « suivant »
  2. « page suivante »
  3. « le mandat présidentiel de George Washington »
  4. « Lire la suite : le mandat présidentiel de George Washington »

Une fois encore, aucune réponse ne s'impose sans doute possible. Suivant le contexte, chacune de ces réponses pourrait être la plus appropriée. Les deux premières peuvent convenir dans la plupart des cas, s'il est clair dès le départ que l'article comporte plusieurs pages. La troisième option explicite clairement la fonction mais sans préciser qu'il s'agit de la page suivante de l'article. Le quatrième choix semble idéal car il précise à la fois la fonction du lien et sa place dans l'article. Ici encore, choisir le meilleur texte alternatif est sujet à interprétation personnelle et dépend du contexte général de la page. Une description de l'image (« flèche ») ne serait pas correcte. Il serait probablement plus intéressant d'inclure « page suivante » ou quelque chose d'équivalent dans le texte du lien, auquel cas l'image pourrait avoir un texte alternatif vide.

Exemple 7

Quel serait le texte alternatif le plus approprié pour cet exemple ?

  1. « Formulaire de candidature »
  2. « fichier PDF »
  3. « icône PDF »
  4. Le contenu de l'image est présent dans le contexte, un attribut alt vide (alt="") convient.

Tout d'abord, cette image fait partie d'un lien. Si ce n'était pas le cas, le texte alt serait bien différent. Dans le cas présent, l'image apporte des informations supplémentaires sur la fonction du lien et il est important qu'elle en fasse partie, principalement parce que les liens sont souvent utilisés sans contexte.

Le premier choix (« Formulaire de candidature ») est totalement redondant avec le contexte et n'apporte rien, ce n'est donc pas le meilleur choix. L'option suivante en revanche est la meilleure car elle informe aussi précisément que l'image que le lien pointe vers un fichier PDF. La fonction de l'image (« télécharger le formulaire de candidature ») est déjà présentée par le contexte du lien, il est donc inutile de l'inclure dans l'attribut alt. Le choix numéro 3 (« icône PDF ») décrit l'image elle-même mais n'est pas la meilleure option dans ce contexte. Dans une autre situation, il pourrait être important de préciser qu'il s'agit d'une icône, et dans ce cas le terme « icône » serait effectivement à sa place dans le texte de l'attribut alt. Le dernier choix (un texte alt vide) fait perdre l'information importante apportée par l'image.

Si le lien vers le fichier PDF ne contenait que l'icône, le texte alternatif devrait apporter à la fois la fonction et son contenu, par exemple « télécharger le formulaire de candidature au format PDF ». Le texte « Format PDF » seul ne serait pas suffisant, en particulier si d'autres liens pointent vers des fichiers PDF. En effet, hors contexte, un logiciel de revue d'écran listant les liens de la page lirait « Format PDF, Format PDF, Format PDF... ». En règle générale, le texte alternatif d'une même image utilisée dans différents liens doit permettre d'identifier la cible du lien.

Les images décoratives

Les images décoratives ne portent pas de contenu important, sont utilisées pour la mise en page ou sans apporter d'information, et n'apparaissent pas dans le texte des liens. Dans la majorité des cas, ce genre d'image doit avoir un texte alt vide (alt="").

Exemple 8

Contenu textuel

exemple d'image

Contenu du pied de page

Quel serait le texte alternatif le plus approprié pour ce séparateur horizontal ?

  1. « ligne décorative »
  2. « début du pied de page »
  3. « séparation »
  4. alt="" suffirait.

Cette image ne donne aucune information et ne fait pas partie d'un lien, la dernière option est donc la plus appropriée. Toute forme de description de l'image serait inappropriée.

Note

Quand une image est utilisée de manière décorative, il est généralement recommandé de l'appliquer en tant qu'arrière-plan via CSS. En procédant ainsi, le choix du texte alternatif ne se pose plus et l'image n'apparaît pas dans le corps sémantique et structurel de la page.

Exemple 9

exemple d'imageNotre société vous promet le meilleur service disponible au monde. Notre équipe de professionnels est particulièrement compétente pour vous offrir le meilleur conseil possible durant tout le processus de négociation du contrat.

La satisfaction de nos clients est notre priorité, et nous vous la garantissons.

Quel serait le texte alternatif le plus approprié pour ce séparateur horizontal ?

  1. « poignée de mains »
  2. « Des hommes d'affaires se serrent la main pour entériner la signature d'un contrat »
  3. alt="" suffirait.
  4. « Nous garantissons un service professionnel »

Pour cet exemple, commençons par déterminer si l'image apporte un contenu important. Dans ce contexte, à mon avis ce n'est pas le cas. Dans la pratique, de nombreuses images de ce type ont pour texte alternatif une description alors que celle-ci n'apporte rien. Ce n'est pas parce qu'une image n'est ni un spacer ni une simple image décorative qu'elle a besoin de texte alternatif. Le troisième choix (alt="") serait ici le plus approprié car l'image n'offre aucun contenu important ou utile. Les deux premiers choix décrivent l'image mais sans préciser sa fonction, et en l'occurrence cette image n'en a pas. Le quatrième choix est incorrect de toute évidence même s'il est fréquent de trouver dans le texte alt des informations supplémentaires ou des mots-clés destinés au moteurs de recherche. Ce genre de pratique va à l'encontre des principes du texte alternatif.

Les cas particuliers

Dans certains cas il peut être vraiment épineux de faire le bon choix. Dans tous les cas, tester ses choix avec un logiciel de revue d'écran et un navigateur en mode texte permet de déterminer le meilleur texte et où l'inclure.

Les images utilisées comme boutons

Dans les formulaires, il est obligatoire de donner aux images utilisées comme boutons un attribut alt traduisant l'action du bouton. Souvent utilisées pour remplacer les boutons de formulaires classiques par une version plus condensée ou plus agréable, les images utilisées comme bouton doivent permettre de connaître l'action effectuée par ce bouton (« Chercher », « Envoyer », « S'inscrire », « Valider la commande », etc). Dans le cas d'un formulaire de recherche, par exemple, le code suivant serait approprié : <input type="image" alt="Lancer la recherche">.

Les images réactives

Les images réactives côté client (image maps) doivent avoir un attribut alt. Celui-ci doit présenter le contenu de l'image, mais pas celui des zones cliquables. Par exemple, pour une carte de l'État de New York dont chaque région serait cliquable, l'image principale aurait pour texte alternatif « État de New York ». En revanche, si l'image en soi ne sert qu'à contenir les zones cliquables (par exemple pour une barre de navigation), le texte alternatif vide alt="" est le plus adapté.

Pour chaque zone de l'image réactive (balise area), l'attribut alt est obligatoire. Chacune de ces zones cliquables doit posséder un texte alternatif décrivant sa fonction.

Les images réactives côté serveur ne peuvent pas avoir de texte alternatif, et ne peuvent pas non plus être utilisées avec un clavier. Leur usage est à proscrire.

Les images découpées

Certains types de designs de page web utilisent de grandes images découpées. Si plusieurs morceaux d'images côte à côte sont porteurs de contenu, celui-ci doit être mis à disposition des utilisateurs. En général, ce contenu doit se trouver dans l'attribut alt du morceau le plus grand ou le plus proéminent. Il n'est en revanche pas nécessaire de le répéter pour chaque morceau d'image, encore moins de le répartir entre les différents morceaux ou de l'ignorer totalement. Si l'un de ces morceaux est un lien, la fonction de ce lien doit être disponible dans l'attribut alt de ce morceau d'image, d'une autre image de ce même lien, ou dans le texte de ce lien. De manière générale, chaque lien doit impérativement comporter un texte décrivant sa fonction.

Les images d'arrière-plan

Les images d'arrière-plan ne peuvent avoir de texte alternatif. Si le contenu d'une image est important, l'image ne doit pas être appliquée en arrière-plan d'une page ou d'un élément.

En revanche, les images d'arrière-plan conviennent particulièrement pour les images à vocation décoratives, car elles n'apparaissent pas dans le flux du document et n'ont donc pas besoin d'un attribut alt vide.

Les logos

Le logo principal est souvent un lien vers la page d'accueil. Cette pratique étant très répandue, il est généralement suffisant de mettre en texte alternatif le nom de l'entreprise (alt="Société Acme" par exemple). Préciser qu'il s'agit d'un logo n'est pas nécessaire en général, car ce n'est ni le contenu ni la fonction du lien. Les développeurs choisissent habituellement de préciser que ce lien amène à la page d'accueil (alt="Société Acme - page d'accueil), mais si l'image se trouve systématiquement au début de la page et que le contenu alternatif est suffisamment explicite, ce ne devrait pas être utile.

Les images complexes

Lorsqu'une image complexe telle qu'un tableau de données ou un graphique ne peuvent être correctement résumés en une ou deux phrases courtes, ET que ce contenu n'est pas présent dans le contexte de la page, il est nécessaire de placer ce contenu alternatif à un autre endroit. Habituellement, c'est le rôle de l'attribut longdesc de l'image, mais celui-ci n'est pas encore parfaitement supporté (plus d'informations sur l'attribut longdesc). Dans ce cas, le texte alternatif de l'image devrait néanmoins décrire le contenu général de l'image. Si l'image en revanche est un lien vers une description plus complète, c'est à préciser dans l'attribut alt de cette image.

<a href="decription_tableau.htm"><img src="tableau.jpg" longdesc="description_tableau.htm" alt="Tableau montrant l'augmentation des ressources sur les 5 dernières années, avec lien vers une description des données"></a>

Ce texte alternatif est un peu long peut-être, mais il présente à la fois le contenu général de l'image et informe l'utilisateur qu'une description est disponible.

Conclusion

Le texte alternatif est l'un des problèmes d'accessibilité les plus courants, mais il est très souvent implémenté de manière inappropriée ou non standard. Les règles suivantes permettront aux développeurs de rendre leur contenu plus accessible aux handicapés.

Le web serait déjà bien plus accessible si le texte alternatif était mis en place correctement et de manière adéquate.

Copyright © 1999-2006 WebAIM (Web Accessibility in Mind). Tous droits réservés.

La société Ideose a conclu un accord avec WebAIM pour traduire leurs documents techniques. Nous invitons donc nos lecteurs à consulter les documents traduits sur le site d'Ideose.

Fiche technique

À propos de l'auteur

WebAIM propose des services, des outils logiciels et des ressources pour les organisations afin de permettre au plus grand nombre de profiter d’un Internet accessible.

Articles du même auteur

Articles similaires

Voici la liste des dix articles les plus récents en rapport avec cet article :

Intermédiaire

Accessibilité

© 2001-2016 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site