Élément graphique

Un élément graphique est tout contenu visuel non textuel : image, icône SVG, pictogramme, graphique de données. Le terme dépasse la simple balise <img> et couvre aussi les <svg>, <canvas> et <object>. Chaque élément graphique porteur d'information doit avoir une alternative textuelle ; chaque élément décoratif doit être masqué aux technologies d'assistance.

Votre page affiche une icône de loupe dans le bouton de recherche. En HTML, c'est un <svg>. Pour un lecteur d'écran, c'est… rien du tout. Sauf si vous l'avez rendu accessible.

#Bien plus large qu'une balise <img>

Le RGAA définit l'élément graphique comme tout élément « faisant appel à une représentation visuelle » : images bitmap (<img>), images vectorielles (<svg>), objets embarqués (<object>), <canvas>, et même les icônes chargées via des polices d'icônes. Un graphique de données avec ses barres et ses courbes est un seul élément graphique composé de plusieurs parties. Chaque point d'une courbe peut nécessiter sa propre description.

Pourquoi cette définition large ? Le critère 1.1.1 des WCAG exige une alternative textuelle pour « tout contenu non textuel ». Il vise tous les éléments graphiques. Pas uniquement les <img>.

Le piège classique : penser « image = <img> avec un alt ». Les SVG inline, les <canvas>, les pictogrammes en icon-font passent sous le radar. 58 % des pages d'accueil analysées par le WebAIM Million présentent au moins une image sans alternative. Les SVG oubliés y contribuent.

#SVG : le cas qui piège tout le monde

Un <svg> inline n'a pas d'attribut alt. Le traitement dépend de son rôle dans la page.

Informatif, le SVG transmet un contenu :

<svg role="img" aria-label="Ventes en hausse de 15 % au T3">
  <title>Ventes en hausse de 15 % au T3</title>
  <!-- … -->
</svg>

role="img" est obligatoire. Sans lui, les navigateurs ne restituent pas le <title> de manière fiable aux technologies d'assistance.

Décoratif, le SVG n'apporte rien au sens :

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

Ni <title>, ni <desc>, ni aria-label. Uniquement aria-hidden="true" pour que le lecteur d'écran l'ignore.

Dans un bouton ou un lien, le SVG sert de déclencheur d'action :

<button>
  <svg role="img" aria-label="Rechercher" focusable="false">
    <path d="…"/>
  </svg>
</button>

Ici, aria-label décrit la fonction du bouton, pas l'apparence de l'icône. « Rechercher », pas « loupe ».

#En résumé

Un élément graphique, c'est tout ce qui communique visuellement sans être du texte : <img>, <svg>, <canvas>, <object>, icônes. Même obligation d'accessibilité pour tous. S'il porte une information, donnez-lui une alternative textuelle. S'il est décoratif, masquez-le. Le réflexe à avoir : ne pas s'arrêter aux <img>.