Implémenter les images

L'accessibilité numérique des images sera traitée différemment selon qu'il s'agit d'images décoratives, informatives ou illustratives.

Ce qu’il faut retenir

Dans une page web, une image peut être utilisée comme simple décoration ou être porteuse d’information (image illustrative ou informative). Selon son usage dans le site, on traitera l’implémentation de l’image de manière différente :

• Dans le cas où l’image sert de décoration (c’est à dire que l’absence d’image ne provoque pas la perte d’informations), on fera en sorte que celle-ci soit ignorée par un lecteur de synthèse vocale.
• Dans le cas contraire (l’image est porteuse d’information), il faudra l’implémenter en prenant soin de proposer un texte de remplacement ou un texte descriptif (cas d’une infographie, par exemple). Enfin, on n’utilisera pas le style CSS pour afficher les images porteuses d’informations telles que :
  • les logos  ;
  • les images-textes  ;
  • les images-liens ;
  • les images-boutons.

Les images s’implémentent le plus souvent avec l’élément HTML <img src="..."> . Une autre façon courante d’implémenter une image consiste à utiliser l’élément svg. Pour autant d’autres éléments HTML existent pour implémenter des images (canvas, area, input type="image", …).

Implémentation des images décoratives

Pour savoir si une image est décorative, le plus simple est d’imaginer qu’il n’y a pas d’image et de se poser ensuite la question : « Est-ce que je perds de l’information ? ». Si la réponse à la question est « Non », alors l’image est décorative. Dans ce cas, on fera en sorte :

• de ne pas ajouter d’alternative textuelle (le plus fréquemment en posant un attribut alt vide : alt="")  ;
• de s’assurer que l’image est bien ignorée par les lecteurs de synthèse vocale (attribut aria-hidden="true").
  D’autres façons d’ignorer la vocalisation de ces images consiste à :
  • poser un attribut aria role="presentation" ;
  • désactiver le focus clavier (cas des images SVG) : focusable="false".

Voici quelques exemples d’implémentation d’une image décorative :

• Pour un élément HTML img :
  • Alternative textuelle vide alt="" :

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

  • Pas d’attribut alt et un rôle aria role="presentation" :

  <img src="mon_image_decorative.png" role="presentation">
  

• Pour un élément HTML svg :
  • avec l’attribut focusable="false" et l’attribut aria aria-hidden="true" et le rôle aria role="presentation" :

  <svg aria-hidden="true" focusable="false" role="presentation">
       ...
  </svg>
  

Implémentation des images illustratives et informatives

Dans le cas où l’image est :

• porteuse d’information ;
• une illustration d’un propos ;
• un lien (une flèche, par exemple) ;
• un bouton seul (une croix pour fermer une fenêtre modale, par exemple) ;
  on veillera à lui ajouter une alternative textuelle.
  L’alternative textuelle se pose soit avec l’attribut alt, soit avec l’attribut title, soit avec les attributs aria aria-label ou aria-labelledby.