En complément de ma série sur les images accessibles : gérer l’accessibilité des images intégrées via <object>, <canvas> et <embed>.

Ce que j’ai fait :

• lire la notice Images(lien externe) du Guide de l’intégrateur
• parcourir les critères et tests relatifs aux images(lien externe) du Référentiel Général d’Amélioration de l’Accessibilité 4

Ce que j’ai appris

Définitions et usages

• la balise <object> permet d’inclure du contenu multimédia dans une page, tels que des images, des fichiers, des vidéos… Vous pouvez trouver plus d’informations sur la page Mozilla dédiée à cette balise(lien externe).

• la balise <canvas> permet de dessiner des graphiques à la volée, via des scripts (en Javascript ou WebGL par exemple). La balise <canvas> est le conteneur dans lequel sont générés les graphiques. Vous pouvez trouver plus d’informations sur la page Mozilla dédiée à cette balise(lien externe).

• la balise <embed> définit un conteneur pour une application externe ou un contenu interactif (c’est à dire un plug-in). Elle permet d’intégrer à une page web tout type d’objets (image, vidéo, audio, programme..). Vous pouvez trouver plus d’informations sur la page Mozilla dédiée à cette balise(lien externe).

Images décoratives

Dans le cas d’images décoratives, qui ne comportent pas d’intitulé visible, les lecteurs d’écran ne doivent pas les restituer. Pour ce faire, il faut :

• ajouter un attribut aria-hidden="true" sur les balises <object>, <canvas> et <embed>.

• s’assurer que les balises <object>, <canvas> et <embed> ou un de leurs enfants ne possède aucun attribut aria-label, aria-labelledby ou aria-describedby

• s’assurer qu’il n’y a aucun texte faisant office d’alternative textuelle entre <object> et </object> et entre <canvas> et </canvas> (l’élément <embed> n’est pas concerné car il est vide)

Par exemple :

<!-- Object -->
<object
  aria-hidden="true"
  type="application/pdf"
  data="In-CC0.pdf"
  width="250"
  height="200">
</object>

<!-- Canvas -->
<canvas
  aria-hidden="true"
  id="canvas"
  width="300"
  height="300">
</canvas>

<!-- Embed -->
<embed
  aria-hidden="true"
  type="video/webm"
  src="flower.mp4"
  width="250"
  height="200">

Images informatives

Si les images sont porteuses de sens, il faut fournir une alternative textuelle. Il est alors possible de labelliser directement l’image ou alors de mettre en place une alternative complémentaire.

Labelliser les images

• ajouter un attribut aria-label qui contient une alternative pertinente de l’image

• ajouter un attribut aria-labelledby qui référence un passage de texte pertinent

Par exemple :

<object
  aria-label="Alternative textuelle"
  type="application/pdf"
  data="In-CC0.pdf"
  width="250"
  height="200">
</object>

(Note de l’autrice : je ne développe pas ici la fonction et l’usage des attributs aria-label et aria-labelledby que je ne connais pas encore suffisamment et qui nécessitent probablement un article entier dédié)

Mettre en place une alternative complémentaire

• pour <canvas>, il est possible d’insérer directement un texte entre les balises ouvrante et fermante. Ce texte sera alors considéré comme l’alternative textuelle (il n’est pas possible de procéder ainsi pour la balise <object> et la balise <embed> est vide)

Par exemple :

<canvas id="canvas" width="300" height="300">
  Texte de l'alternative textuelle
</canvas>

• il est possible de donner accès à une alternative textuelle via un lien adjacent situé immédiatement avant ou après l’image

• il est possible de prévoir un mécanisme permettant à l’utilisateur de remplacer l’image par un texte alternatif (ou par une autre image possédant une alternative textuelle)