ARIA : rôle img
Le rôle img
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 de role="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 avec role="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'attribut aria-label
. Ajoutez également des attributs alt
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 id="image-1">Texte qui décrit le groupe d'images.</p>
</div>
Si une image est purement présentational, envisagez d'utiliser le rôle presentation
.
Le SVG et role="img"
Si vous utilisez des images SVG intégrées dans votre page, il est judicieux de définir role="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'attribut alt
), mais dans le cas de contenus mixtes ou d'autres types de contenus, ce n'est pas si évident, et role="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>🐈 😂</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 un aria-label
avec role="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'emojis ASCII, comme le légendaire « Table renversée » :
<div role="img" aria-label="Table renversée">
<p>(╯°□°)╯︵ ┻━┻</p>
</div>
Si aria-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 un img
. Pour faire face à cette limitation, les navigateurs appliquent automatiquement le rôle presentation
à tous les éléments descendants de tout élément img
, 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ément img
, qui contient un titre.
<div role="img"><h3>Le titre de mon image</h3></div>
Parce que les descendants de img
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
Specification |
---|
Accessible Rich Internet Applications (WAI-ARIA)> # img> |
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ôle
presentation
- Modèle d'Objet d'Accessibilité (angl.)
- L'ARIA dans le HTML (angl.)