Les techniques pour donner un texte alternatif à une image

Une image est soit décorative, soit porteuse d'information. Pour être accessible, chaque image doit avoir une alternative textuelle appropriée ou être identifiée comme décorative. Cet article décrit les différentes techniques pour faire cela.

Ces techniques 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.

Contenu

• L'image dans Accessibility tree
• L'élément img
• L'élément svg
• Les images insérées par CSS
• Les caractères (lettres, ponctuation, émojis, icônes)
• Les caractères insérés par CSS
• Résumé

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. Les personnes utilisant un lecteur d'écran n'entendent rien et ne savent pas qu'une image est présente.
• 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

Il est également possible de voir d'où vient le nom : aria-label, aria-labelledby, alt, title,... Dans cet exemple seul l'attribut alt est frouni et le nom est donc dérivé de l'attribut alt.

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 une 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. 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 est présente dans l'accessibility tree avec un role img, mais sans nom. Les technologies d'assistance essaient alors d'en deviner le nom et utilisent généralement 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 élément svg, il est nécessaire d'utiliser des attributs ARIA pour en garantir l'accessibilité. Si vous ne connaissez pas encore bien ARIA, il est recommandé de lire d'abord une introduction à ARIA.

Image SVG décorative

Pour qu'une image inséré comme SVG n'apparaisse pas dans l'accessibility tree, utilisez aria-hidden="true" et n'insérez pas d'élément title à l'intérieur du svg.

<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>

Images insérées par CSS

Il est possible d'insérer une image (fichier png ou jpg par exemple) 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 Facebook qui ne contient pas de texte mais uniquement un logo inséré par CSS :

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

a.fb:after { 
    content:url('icon_fb.png'); 
}

On peut toujours ajouter une alternative textuelle ajoutée au moyen d'un texte caché. Dans des cas spécifiques on peut aussi utiliser l'attribut aria-label.

Texte caché

Ajoutez 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="fb" href="https://facebook.com/anysurfer">
  <span class="visuallyhidden">Facebook</span>
</a>

a.fb:after { 
    content:url('icon_fb.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 également de donner un nom accessible à un élément. Mais on ne peut utiliser aria-label que sur un élément qui a un rôle, comme un button ou un lien, pas sur un span ou un div.

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

<a class="fb" 
aria-label="Facebook" href="https://facebook.com/anysurfer">
</a>

a.fb:after { 
    content:url('icon_fb.png'); 
}

Attention : aria-label écrase 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 (lettres, ponctuation, émoji et autres symboles)

Les techniques présentées dans ce chapitre couvrent différents types de caractères:

• Les lettres ou symboles utilisés pour leur aspect visuel plutôt que pour leur sens premier : par exemple la lettre "X" pour "fermer" ou le symbole "→" pour "suivant")
• Les caractères de ponctuation utilisés pour leur aspect visuel, comme par exemple l'émoticône :-)
• Les émojis comme 🙀: ce sont aussi des caractères unicodes mais qui s'affichent comme de petites images. Les lecteurs d'écran restituent une alternative textuelle pour certains émojis, mais elle n'est pas toujours pertinente.
• Les polices d'icône qui remplacent visuellement des lettres par des icônes.

Caractères décoratifs

Utilisez aria-hidden pour cacher des caractères décoratifs.

Exemples :

• Un caractère "supérieur" placé dans l'intitulé d'un lien "Lire plus >" parce qu'il ressemble à une flèche :

  <a href="#">
    Lire plus
    <span aria-hidden="true">
      >
    </span>
  </a>

• Un émoji avion (✈) sur le site d'une compagnie aérienne :

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

Caractères porteurs d'informations

Il y a deux techniques possibles:

• Cacher le caractère avec aria-hidden + insérer une alternative sous forme de texte caché
• Utiliser aria-label pour donner une alternative textuelle (uniquement sur des éléments avec un rôle)

Avec aria-hidden + texte caché

Pour éviter qu'un lecteur d'écran ne restitue des caractères qui n'ont pas de sens, cachez les caractères avec aria-hidden et fournissez une alternative textuelle au moyen d'un texte caché. Par exemple :

• Un symbole "<" (inférieur à ) suivi d'un 3 est interprété visuellement comme un coeur. Pour éviter que "<3" ne soit restitué comme "inférieur à 3" :

  <span aria-hidden="true"><3</span>
  <span class="visuallyhidden=">(coeur)</span>

• Les émoticônes sont porteurs d'information parce qu'ils permettent de nuanacer ce qui est dit, mais ce n'est pas facile d'interpréter une suite de caractères de ponctuation quand on ne les voit pas. On peut aussi leur donner une alternative textuelle :

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

Avec aria-label

On peut utiliser aria-label pour donner un nom à un lien, un bouton ou un émoji.

Par exemple, le bouton de fermeture d'une fenêtre modale contient parfois un simple 'X' ou symbole de multiplication. Dans ce cas-ci, la solution la plus simple est d'ajouter un attribut aria-label sur le bouton. Le contenu de l'attribut aria-label (Fermer) écrase le contenu du bouton (X) :

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

Si l'on veut utiliser un attribut aria-label plutôt qu'un texte caché pour un émoji, il faut :

• Placer l'émoji dans un span pour pouvoir y associer des attributs.
• Utiliser role="img" pour donner un rôle image au span.
• Utiliser 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 ✈?

Caractères unicodes insérés par CSS

Il est possible d'insérer des caractères unicode (lettres, ponctuation, icônes, émojis) par CSS avec :before et :after et content. Ces caractères se trouvent aussi dans l'accessibility tree, contrairement aux images insérées par CSS (voir plus haut).

Caractère décoratif inséré par CSS

La technique la plus simple est de marquer le caractère comme décoratif dans le code CSS en ajoutant / "" juste après le caractère inséré. Par exemple pour masquer un ">" inséré après le texte "lire plus" d'un lien :

<a class="readmore" href="#">
Lire plus
</a>

.readmore:after {
content: ">" / "";
}

Il serait également possible de masquer le caractère dans le code source au moyen de aria-hidden="true", mais c'est uniquement possible si le caractère est inséré au moyen d'un élément séparé (par exemple span), et pas directement associé au lien:

<a href="#">
  Lire plus
  <span class="readmore" aria-hidden="true"></span>
</a>

.readmore:after {
content: ">";
}

Caractère porteur d'information inséré par CSS

1. Supprimez le caractère de l'accessibility tree de la même manière que pour un caractère décoratif.
2. Donnez une alternative textuelle en utilisant les mêmes techniques que pour les images insérées par CSS.

Avec aria-label

Exemple : un bouton contenant uniquement une icône poubelle:

<button class="trash" aria-label="Supprimer"></button>

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

Avec un texte caché

Exemple : un bouton contenant une icône représentant une enveloppe et le chiffre 2:

<button class="messages">
<span class="visuallyhidden=">Messages: </span>
2
</button>

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

On choisit le texte caché et non aria-label="messages" parce que cela écraserait le chiffre 2.

Résumé

alt=""

alt="alternative"

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

<svg role="img">
  <title>alternative</title>...
</svg>

content: url('img.png')
background: url('img.png')

<span class="visuallyhidden">
  alternative
</span>

<a aria-label="alternative"></a>

<span aria-hidden="true">
  caractère
</span>

<span aria-hidden="true">
  caractère
</span>
<span class="visuallyhidden">
  alternative
</span>

<a aria-label="alternative">
  caractère
</a>

<span role="img" 
	aria-label="alternative">
  émoji
</span>

content: "caractère"

content: "caractère" / "";

content: "caractère" / "";

<span class="visuallyhidden">
  alternative
</span>

<a aria-label="alternative"></a>