Le rôleimg est utilisé pour identifier plusieurs éléments à l'intérieur du contenu de la page qui doivent être considérés comme une seule image. Ces éléments sont des images, des extraits de code, du texte, des emojis ou d'autres contenus qui peuvent être combinés pour transmettre des informations de manière visuelle.

<div role="img" aria-label="Description de l'image globale">  <img src="graphic1.png" alt="" />  <img src="graphic2.png" /></div>

Description

N'importe quel ensemble de contenu qui doit être consommé comme une seule image (qui peut inclure des images, des vidéos, de l'audio, des extraits de code, des emojis ou d'autres contenus) peut être identifié à l'aide derole="img".

Vous ne devez pas compter sur le texte alternatif des images individuelles pour transmettre le contexte aux technologies d'assistance ; la plupart des lecteurs d'écran considèrent l'élément avecrole="img" comme une boîte noire et n'accèdent pas aux éléments individuels à l'intérieur. Par conséquent, fournissez une description globale et complète de l'image, soit dans le texte autour de l'image, soit en utilisant l'attributaria-label. Ajoutez également des attributsalt aux images individuelles afin que les moteurs de recherche et les utilisateur·ice·s voyants puissent voir ce texte si une image ne s'affiche pas :

<div role="img" aria-label="Description of the overall image">  <img src="graphic1.png" alt="alternative text" />  <img src="graphic2.png" alt="in case the images don't load" /></div>

Si vous souhaitez ajouter une légende ou un label à votre image qui est visible sur la page, vous pouvez le faire en utilisant :

• aria-labelledby lorsque le texte est un label concis.
• aria-describedby lorsque le texte est une description plus longue.

Par exemple :

<div role="img" aria-labelledby="image-1">  …  <p>Texte qui décrit le groupe d'images.</p></div>

Si une image est purement présentational, envisagez d'utiliser le rôlepresentation.

Le SVG et role="img"

Si vous utilisez des images SVG intégrées dans votre page, il est judicieux de définirrole="img" sur l'élément<svg> externe et de lui donner une étiquette. Cela amènera les lecteurs d'écran à le considérer comme une seule entité et à le décrire en utilisant l'étiquette, plutôt que d'essayer de lire tous les nœuds enfants :

<svg role="img" aria-label="Description de votre image SVG">  <!-- contenu de l'image SVG --></svg>

Utilisation de role="img" pour conférer un sens qui est obscurci ou implicite

Dans certains cas, les utilisateur·ice·s de technologies d'assistance ne peuvent pas comprendre le sens du contenu exprimé de certaines manières, à travers certains médias, ou implicite de certaines manières. Cela est évident à corriger dans le cas des images (vous pouvez utiliser l'attributalt), mais dans le cas de contenus mixtes ou d'autres types de contenus, ce n'est pas si évident, etrole="img" peut entrer en jeu.

Par exemple, si vous utilisez des emojis dans votre texte, le sens peut être évident pour un·e utilisateur·ice voyant, mais quelqu'un utilisant un lecteur d'écran peut être confus car les emojis peuvent n'avoir aucune représentation textuelle du tout, ou le texte alternatif peut être déroutant et ne pas correspondre au contexte dans lequel il est utilisé. Par exemple, prenez le code suivant :

<div role="img" aria-label="Ce chat est tellement mignon">  <p>&#x1F408; &#x1F602;</p></div>

🐈 😂, 🐈 et 😂, sont des références d'entité pour des emojis lus comme « Chat » et « Visage avec des larmes de joie », mais cela n'a pas nécessairement de sens — le sens implicite est peut-être plus proche de « Ce chat est tellement mignon », donc nous incluons cela dans unaria-label avecrole="img".

Cela semble fonctionner correctement dans certaines combinaisons de navigateurs/lecteurs d'écran, mais certains d'entre eux finissent par lire l'étiquette deux fois. Utilisez avec prudence et testez soigneusement.

Un autre exemple où cela pourrait être approprié est lors de l'utilisation de combinaisons d'emojisASCII, comme le légendaire « Table renversée » :

<div role="img" aria-label="Table renversée">  <p>(╯°□°）╯︵ ┻━┻</p></div>

Siaria-labelledby était utilisé, le lecteur d'écran le lirait. Dans ce cas, seuls les contenus de l'aria-label sont annoncés aux utilisateur·ice·s de lecteurs d'écran, cachant le charabia des caractères sans avoir besoin d'ARIA descendant pour cacher les choses, mais cachant également le contenu potentiel qui pourrait faire partie de l'image.

Tous les descendants sont présentatifs

Il existe certains types de composants d'interface utilisateur qui, lorsqu'ils sont représentés dans une API d'accessibilité de plateforme, ne peuvent contenir que du texte. Les API d'accessibilité n'ont pas de moyen de représenter les éléments sémantiques contenus dans unimg. Pour faire face à cette limitation, les navigateurs appliquent automatiquement le rôlepresentation à tous les éléments descendants de tout élémentimg, car il s'agit d'un rôle qui ne prend pas en charge les enfants sémantiques.

Par exemple, considérons le suivant élémentimg, qui contient un titre.

<div role="img"><h3>Le titre de mon image</h3></div>

Parce que les descendants deimg sont présentatifs, le code suivant est équivalent :

<div role="img"><h3 role="presentation">Le titre de mon image</h3></div>

Du point de vue de l'utilisateur·ice de la technologie d'assistance, le titre n'existe pas puisque les extraits de code précédents sont équivalents à ce qui suit dans l'arbre d'accessibilité :

<div role="img">Le titre de mon image</div>

Propriétés, états et rôles WAI-ARIA associés

aria-label ouaria-labelledby

Un nom accessible est requis. Pour l'élément HTML<img>, utilisez l'attributalt. Pour tous les autres éléments avec le rôleimg, utilisezaria-labelledby si une étiquette visible est présente, sinon utilisezaria-label.

Exemples

<span role="img" aria-label="Évaluation : 4 sur 5 étoiles">  <span>★</span>  <span>★</span>  <span>★</span>  <span>★</span>  <span>☆</span></span>

Spécifications

Voir aussi

• L'élément HTML<img>
• L'élément HTML<svg>
• L'élément HTML<picture>
• L'élément HTML<audio>
• L'élément HTML<video>
• ARIA : rôlepresentation
• Modèle d'Objet d'Accessibilité^(angl.)
• L'ARIA dans le HTML^(angl.)