Bien utiliser l'attribut alt

Le web est plus fort lorsqu'il est divers : plus il est accessible, meilleur il est. Dudley Storey fait le point sur les règles à connaître concernant l'attribut alt d'alternative textuelle.

Par

Le web est plus fort lorsqu’il est divers : plus il est accessible, meilleur est ce qu’il nous offre. L’attribut alt est un exemple déjà ancien de ce que nous pouvons faire pour améliorer l’accessibilité, mais pour bien écrire un texte alternatif pour vos images il est utile de connaître quelques règles.

alt

alt est la représentation alternative d’une image sous forme de texte. Si une image ne se charge pas ou si elle est bloquée, la valeur de l’attribut alt s’affichera à la place. Les utilisateurs d’outils pour l’accessibilité pourront entendre le texte lu à haute voix ou lire sa transcription en braille. alt est également utile pour le SEO, car il fait partie des informations permettant aux moteurs de recherche de déterminer le contenu d’une image et d’associer votre site aux termes de recherche.

L’attribut alt (souvent appelé par erreur la “balise tag”) est obligatoire pour tous les éléments <img> de votre site. La plupart du temps, la façon la plus simple de rédiger un texte alternatif est d’écrire ce que vous diriez si vous faisiez le description de l’image à quelqu’un. Par exemple la photographie en tête de cet article pourrait être décrite ainsi :

<img src="singel.jpg" alt="Crépuscule à Jordaan, Amsterdam, Hollande">  

Ou encore (et mieux) :

<img src="singel.jpg" alt="Une rangée de maisons aux fenêtres illuminées le long d’un canal à Amsterdam">  

D’une manière générale, plus le texte est descriptif, meilleur il est.

Exceptions à alt : les logos

Si le contenu principal d’une image est un texte, les règles changent. Les images bitmap présentant un texte intégré, comme celle-ci :

Festa Del Rederentore, Venezia ~ Dal 1577

…devrait avoir une valeur d’attribut alt reflétant directement le texte de l’image.

<img src="festa-del-rederentore.png" alt="Festa Del Rederentore, Venezia ~ Dal 1577">  

La raison en est simple : la plupart des lecteurs d’écran ne savent pas bien reconnaître et traduire le texte d’une image, celui-ci est donc impénétrable à la fois pour les moteurs de recherche et pour les personnes aveugles. En plaçant le texte dans alt, vous faites la traduction pour eux.

 NB : vous verrez souvent ce genre de balisage pauvre : <img src="logo.gif" alt="Logo">. Ne faites pas cela.

C’est aussi une excellente raison d’utiliser le SVG en ligne pour les logos. Correctement construit, un logo SVG sera un vrai texte, lisible par tous. Il est important de noter que si le texte est dispersé en plusieurs chemins SVG, sa valeur sémantique est perdue. Une solution alternative (et peut-être meilleure) est de conserver la partie graphique du logo en SVG et d’écrire le reste dans le balisage auquel on appliquera un style. Bien sûr les deux options doivent être examinées en tenant compte du temps que prendra le chargement d’une police de caractères embarquée.

alt vide

Il y a deux cas dans lesquels on peut laisser vide l’attribut alt :

  • l’image est purement décorative, c’est à dire qu’elle n’a pas de valeur informative;
  • l’image est décrite de manière appropriée par un élément sémantique qui la suit immédiatement, généralement une <figcaption>.

Si vous voulez que votre page reste valide, alt doit malgré tout être présent dans <img>, et pour indiquer qu’il est vide on lui donne la valeur "" (guillemets ouvrant et fermant sans espace entre les deux).

<img src="flourish.png" alt="">  

Une autre solution en HTML5 est de laisser l’attribut alt sans valeur :

<img src="flourish.png" alt>  

Dans certaines occasions rares la valeur de alt peut être très proche du texte en légende (<figcaption>), dans ce cas le texte alternatif est redondant et peut être laissé vide.

<figure>  
    <img src="rio-di-san-barnaba.jpg" alt>
    <figcaption>Photograph down the canal of the Rio di San Barnaba, Venice</figcaption>
</figure>  

Les différences peuvent être subtiles : alt décrit une image, alors que <figcaption> intitule le contenu de l’élément <figure>. Dans la plupart des cas, les deux seront différents et devraient donc être conservés :

<figure>  
    <img src="doge-portrait.jpg" alt="Peinture à l'huile représentant un homme âgé portant une casquette et un manteau brodé">
    <figcaption>Portrait du Doge Leonardo Loredan par Giovanni Bellini</figcaption>
</figure>  
Peinture à l'huile représentant un homme âgé portant une casquette et un manteau brodé
Portrait du Doge Leonardo Loredan par Giovanni Bellini

Ne confondez pas alt et title

On trouve parfois des balisages qui appliquent la même valeur à alt et à title. En général, c’est une mauvaise idée. Le texte de title, qui apparaît en pop-up, est rarement vu par les utilisateurs car il faut quelques secondes avant qu’il ne surgisse, et il ne sera pas lu par les outils d’accessibilité sauf si l’élément est en focus.

Positionnement de alt

Les lecteurs d’écran lisent le texte de alt en ligne avec le reste du contenu, par conséquent il est souhaitable d’écrire le texte descriptif dans un flux contextuel, en particulier si l’image est flottée.

Ne négligez pas les autres media

alt est presque exclusivement associé aux images, mais cela ne signifie pas que le texte descriptif des autres formats de media doive être négligé : les vidéos et les audios devraient par exemple utiliser les sous-titres WebVTT.

Photo par MorBCN, sous licence Creative Commons.



Intéressé par l’accessibilité ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles sur l’accessibilité parus dans la Cascade.


Du même auteur dans La Cascade :

Image révélée au grattage avec SVG et CSS Blend Modes
Créer de superbes diagrammes avec SVG et CSS Blend Modes
Backgrounds Pop-Art avec SVG et CSS Blend Modes
Motifs SVG japonais
Contraste de texte automatique avec CSS Blend Modes
Backgrounds SVG, les rayures
Diagonales et motifs SVG en background
Les bases de SVG : Lignes simples et multiples
Les bases de SVG : Polygones
Les bases de SVG : Cercles et Ellipses
Les bases de SVG : Rectangles et Carrés
Brood X : Le principe des cigales en CSS
5 règles pour rendre SVG accessible
3 raisons d’utiliser HSL pour vos couleurs
Utiliser HSL pour vos couleurs
Effets vidéo HTML5 avec CSS Blend-Modes
Un carrousel responsif en pur CSS
Combiner CSS clip-path et Shapes
Appropriation culturelle : utiliser les collections des musées
Créer un player audio en HTML5 (3 articles)
Qu’est-ce qu’un élément remplacé ?
Utiliser CSS object-fit
Stores vénitiens 3D en CSS
CSS : Aider la veuve et l’orphelin
Toi seul : utiliser only-child de CSS
Créer un background vidéo fullscreen avec HTML5
Rendre un SVG responsif
La première variable CSS : currentColor
Empty, une pseudo-classe pas si vide
Les raccourcis HTML5


Ressources complémentaires en anglais

Ressources complémentaires en français


original paru le , modifié le 20 septembre 2015 dans the new code.

Sur l’auteur : est enseignant, auteur, artisan et cycliste, il vit à Calgary, dans l’État de l’Alberta au Canada. Passionné par le web et le développement (mobile) qu’il enseigne depuis 15 ans, il est l’auteur de Pro CSS3 Animation, et publie régulièrement dans son blog demosthenes.info des articles sur HTML, CSS et SVG. On peut le suivre sur Twitter ou Google+.

Traduit avec l’aimable autorisation de l’auteur.
Copyright Dudley Storey © 2015.