Les techniques pour donner un texte alternatif à une image

Dernière mise à jour le 01/03/2022

Pour être accessible, chaque image doit avoir une alternative textuelle appropriée ou être identifiée comme décorative.

Les techniques pour fournir des alternatives textuelles aux images dépendent de la manière dont l'image est insérée dans une page web : par le biais d'un élément img ou svg, ou en utilisant une technique CSS. Les lettres ou caractères typographiques ont aussi besoin d'une alternative textuelle quand ils sont utilisés pour leur aspect visuel et non pour leur signification première.

Un article séparé décrit la différence entre images décoratives et porteuses d'information et comment donner une alternative textuelle pertinente à une image dans des contextes différents.

L'image dans l'accessibility tree

Les navigateurs transmettent l'information contenue dans la page web aux technologies d'assistance à travers l'accessibility tree.

En identifiant une image comme décorative, on fait en sorte qu'elle ne se trouve pas dans l'accessibility tree. Elle sera donc ignorée par un lecteur d'écran, qui ne la lira pas.
En donnant une alternative textuelle à une image porteuse d'information dans l'accessibility tree, on donne un nom accessible à l'image:
- Le nom accessible est lu par un lecteur d'écran quand il rencontre une image.
- Une personne qui utilise un logiciel de reconnaissance vocale peut utiliser le nom accessible d'un élément pour cliquer dessus.

Il est possible de visualiser le contenu de l'accessibility tree en utilisant les outils développeurs dans le navigateur. On peut par exemple inspecter un logo AnySurfer dans Chrome:

Sélectionner l'onglet 'Accessibility'
Sous ' computed properties' on trouve les propriétés suivantes:
- Name : "AnySurfer - Accueil"
- Role : img

capture d'écran du logo dans Chrome avec le code HTML correspondant et le contenu de l'accessibility tree

L'élément `img`

Les images insérées au moyen de <img>, <input type="image"> et <area> ont toujours besoin d'un attribut alt.

Image décorative

Une image décorative doit avoir un attribut alt vide. L'atribut alt est bien présent mais ne contient rien, même pas un espace, par exemple:

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

Attention à ne pas confondre attribut alt vide et attribut alt absent. Un attribut alt peut être vide mais pas absent:

Un attribut alt vide fait en sorte que l'image ne soit pas présente dans l'accessibility tree. De cette manière elle est invisible pour les technologies d'assistance. Dans l'exemple ci-dessous on voit que le logo a un attribut alt vide, et que dans l'accessibility tree il est indiqué 'Accessibility node not exposed'
Quand l'attribut alt est absent, l'image sera quand même présente dans l'accessibility tree avec un role img, mais sans nom. Les technologies d'assistance essaieront alors d'en deviner le nom et utiliseront souvent le nom du fichier.

La spécification HTML n'autorise pas l'absence d'attribut alt sur un élément img.

Image porteuse d'information

Pour une image porteuse d'information insérée au moyen de <img> ou <input type="image">, utilisez l'attribut alt pour fournir une alternative textuelle, par exemple:

Pour un logo qui est un lien vers le site de AnySurfer:

<a href="https://www.anysurfer.be">
  <img src="logo.png" alt="AnySurfer" />
</a>

Pour un bouton de recherche représenté par une loupe:
```
<input type="image" alt="chercher">
```

L'élément `svg`

Pour les images insérées au moyen d'un svg inline, il est nécessaire d'utiliser des attributs ARIA pour en garantir l'accessibilité. Si vous n'êtes pas encore familier avec ARIA, il est recommandé de lire d'abord une introduction à ARIA.

Image SVG décorative

Utilisez aria-hidden="true" pour que les images SVG décoratives n'apparaissent pas dans l'accessibility tree.

<svg aria-hidden="true"></svg>

Image SVG porteuse d'information

Ajoutez un attribut ARIA role="img" à l'élément svg pour vous assurer que cet élément soit identifié comme une image dans l'accessibility tree.
Placez l'alternative textuelle d'une image porteuse d'information dans l'élément title:
```
<svg role="img">
    <title>Chercher</title>
</svg>
```
Vous trouverez parfois également la recommandation d'ajouter également un attribut aria-labelledby pour lier le contenu du title à l'élément svg. Mais les tests de Deque semblent indiquer que ce n'est plus nécessaire puisque les résultats du 8e modèle (avec aria-labelledby) sont identiques à ceux du 5e modèle sans aria-labelledby.

Images insérées par CSS

Il est possible d'insérer une image en utilisant les pseudo-éléments CSS :before et :after; ou en utilisant background.

Images CSS décoratives

Ces images sont considérées comme décoratives par défaut et n'apparaissent pas dans l'accessibility tree. Il ne faut donc rien faire en plus.

Images CSS porteuses d'information

Exemple: un lien vers Twitter qui ne contient pas de texte mais uniquement un logo inséré par CSS:

<a class="twitter" href="https://twitter.com/anysurfer">
</a>

a.twitter:after { 
    content:url('icon_twitter.png'); 
}

Cette image a besoin d'une alternative textuelle. Elle peut toujours être ajoutée au moyen d'un texte caché. Dans des cas spécifiques on peut aussi utiliser l'attribut aria-label.

Texte caché

Le principe est d'ajouter dans le code HTML un texte de remplacement qui n'est pas affiché à l'écran mais qui apparait dans l'accessibility tree et est donc visible pour les technologies d'assistance.

<a class="twitter" href="https://twitter.com/anysurfer">
<span class="visuallyhidden">Twitter</span>
</a>

a.twitter:after { 
    content:url('icon_twitter.png'); 
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

Vous trouverez plus d'infos sur cette technique dans l'article cacher du texte.

Avec `aria-label`

L'attribut aria-label permet de donner un nom accessible à un élément.

Si on reprend l'exemple plus haut, on pourrait utiliser un attribut aria-label pour donner un nom au lien graphique 'Twitter' :

<a class="twitter" 
aria-label="Twitter" href="https://twitter.com/anysurfer">
</a>

a.twitter:after { 
    content:url('icon_twitter.png'); 
}

Cette technique est à utiliser avec prudence. Si vous utilisez aria-label, sachez que cette technique ne fonctionne que sur un élément qui a un rôle, comme un button ou un lien, mais pas sur un span. Et aria-label va remplacer le texte qui se trouverait déjà dans ces éléments. Pour plus d'infos lisez l'article sur aria-label et aria-labelledby.

Caractères textuels

Parfois on utilise des caractères textuels non pas pour leur sens premier mais pour leur aspect visuel. Ces caractères pourront être décoratifs dans certains contextes et porteurs d'information dans d'autres contextes. Ce ne sont pas strictement des images, mais ils peuvent aussi avoir besoin d'une alternative textuelle.

Émoticônes

Les émoticônes (comme :-), par exemple) sont rarement décoratifs. On les ajoute pour ajouter une nuance à un message et indiquer comment il faut l'interpréter. Tout le monde ne pourra pas interpréter les caractères consécutifs correctement. Pour rendre une émoticône accessible:

cachez les caractères avec aria-hidden="true"
et ajoutez une alternative textuelle avec la technique de texte caché décrite plus haut (class="visuallyhidden).

Exemple:

<span aria-hidden="true">:/</span>
<span class="visuallyhidden">(mélancolique)</span>

Émoji

Les émojis peuvent être décoratifs, comme par exemple un petit avion sur le site d'une compagnie aérienne. Dans ce cas, mettez le dans un span avec aria-hidden="true":

Envolez-vous vers le soleil!<span aria-hidden="true">✈</span>

Quand un émoji est porteur d'information:

Placez l'émoji dans un span pour pouvoir y associer des attributs.
Utilisez role="img" pour donner un rôle image au span.
Utilisez aria-label pour donner une alternative textuelle.

Partirons-nous en <span role="img" aria-label="train">🚆</span> ou en <span role="img" aria-label="avion">✈</span>?

Partirons-nous en 🚆 ou en ✈?

Remarque : Certains lecteurs d'écran énoncent un texte alternatif pour certains emojis. Ca marche bien avec des emojis sans ambiguïté comme l'avion, mais d'autres sont interprétés différemment. Par exemple, JAWS 2023 indique "visage de chat lasse", NVDA lui annonce "chat fatigué" et VoiceOver sur iOS indique "tête de chat mort de peur" lorsqu'un 🙀 apparaît à l'écran. Avec la technique ci-dessus, vous vous assurez que votre propre description sera lue. De plus, contrairement à l'utilisation de l'emoji, cette description est également lisible sur un afficheur braille.

Autres symboles

Le bouton de fermeture d'une fenêtre modale contient parfois un simple 'X' ou symbole de multiplication. Visuellement on interprète ceci comme une croix et l'on comprend que cela sert à fermer la fenêtre. Mais pour un utilisateur de lecteur d'écran, 'bouton X' ou 'bouton fois' n'est pas clair.

Ici également vous pouvez cacher le caractère X avec aria-hidden="true" et ajouter une alternative textuelle qui va remplacer le contenu du bouton dans l'accessibility tree ou bien ajouter une aria-label sur le button

<button aria-label="Fermer">
X
</button>

Polices d'icônes

Une police d'icônes associe une icône à un caractère unicode, par exemple \EA08 pour une icône qui représente la loupe d'un champ de recherche. Le caractère inséré se trouve dans l'accessibility tree mais sa signification n'est pas disponible pour un utilisateur de lecteur d'écran qui voit juste la valeur unicode.

Icône décorative

On peut utiliser aria-hidden pour rendre l'icône invisible. Attention à insérer l'icône au moyen d'un span séparé et de ne pas l'associer directement à un button, sans quoi le bouton sera également invisible.

Dans l'exemple ci-dessous, le bouton contient un texte et une icône. L'icône est redondante et peut être considérée comme décorative. Ne pas faire:

<button data-icon="p" class="icon">Chercher</button>

.icon:before {
    font-family: 'icomoon'; 
    content: attr(data-icon);
    }

Mais faire ceci:

<button>
  <span data-icon="p" class="icon" aria-hidden="true"> </span>
  Chercher
</button>

.icon:before {
    font-family: 'icomoon'; 
    content: attr(data-icon);
    }

Icône porteuse d'information

Supprimez l'icône de l'accessibility tree et ajoutez une alternative textuelle. Si on prend un bouton de recherche qui contient uniquement une icône, sans texte visible, on peut utiliser un aria-label. Celui-ci écrase le contenu et il n'est donc pas nécessaire d'utiliser aria-hidden="true":

<button data-icon="p" class="icon" aria-label="Chercher"></button>

.icon:before {
    font-family: 'icomoon'; 
    content: attr(data-icon);
    }

Si l'icône ne se trouve pas dans un élément interactif, vous pouvez également utiliser un attribut aria-label, mais, comme dans l'exemple des émojis, il faut alors donner un role="img" au span pour que cela fonctionne.

<span class="phone" role="img" aria-label="téléphone">

Une autre technique est de cacher l'icône avec aria-hidden="true" et d'ajouter une alternative textuelle au moyen d'un texte caché (class="visuallyhidden"). Cette technique pose cependant des problèmes pour les utilisateurs de Voiceover sur iOS quand ils utilisent la fonction 'explorer au toucher'.

Commentaires

Soyez le premier à commenter