ARIA : rôle figure
Le rôle figure
peut être utilisé pour identifier une figure à l'intérieur du contenu de la page lorsque des sémantiques appropriées n'existent pas déjà. Une figure est généralement considérée comme une ou plusieurs images, extraits de code ou autres contenus qui transmettent des informations d'une manière différente de celle d'un flux de texte régulier.
Description
Une figure
est une section de contenu perceptible qui contient généralement un document graphique, des images, des extraits de code ou du texte d'exemple. Les parties d'une figure PEUVENT être navigables par l'utilisateur·ice. Tout contenu qui doit être regroupé et consommé comme une figure (qui pourrait inclure des images, des vidéos, de l'audio, des extraits de code ou d'autres contenus) peut être identifié comme une figure en utilisant role="figure"
.
<div role="figure" aria-labelledby="caption">
<img src="image.png" alt="mettez la description de l'image ici" />
<p id="caption">Figure 1 : La légende</p>
</div>
Dans l'exemple ci-dessus, nous avons une figure qui se compose de deux éléments de contenu distincts : une image et une légende. Cela est enveloppé par un élément <div>
qui identifie le contenu comme une figure en utilisant role="figure"
.
Pour HTML, utilisez les éléments <figure>
et <figcaption>
. Le figcaption servira de nom accessible pour la figure. Lorsque vous n'utilisez pas HTML, ou lorsque vous adaptez du HTML hérité, utilisez le aria-labelledby
sur la figure, pointant vers la légende de la figure.
S'il n'y a pas de légende visible, aria-label
peut être utilisé.
<div role="figure" aria-labelledby="figure-1">
…
<p id="figure-1">Texte qui décrit la figure.</p>
</div>
- Utilisez
aria-labelledby
lorsque le texte est une étiquette concise. - Utilisez
aria-describedby
lorsque le texte est une description plus longue. - Utilisez
aria-label
lorsque la légende de la figure n'est pas visible.
Cela peut être fait sémantiquement, sans ARIA, avec l'élément <figure>
de HTML ainsi que <figcaption>
.
<figure>
<img src="image.png" alt="mettez la description de l'image ici" />
<figcaption>Figure 1 : La légende</figcaption>
</figure>
Note :
Si possible dans votre travail, vous devriez utiliser les éléments HTML sémantiques appropriés pour marquer une figure et sa légende — <figure>
et <figcaption>
.
Associated WAI-ARIA roles, states, and properties
aria-describedby
-
L'id d'un élément contenant un texte de référence servant de légende.
aria-labelledby
-
L'id d'un élément contenant un texte servant d'étiquette.
aria-label
-
Si aucun élément contenant un texte pouvant servir d'étiquette n'est présent, vous pouvez ajouter l'étiquette directement en tant que valeur de l'attribut
aria-label
sur l'élément ayant le rôlefigure
ou sur l'élément<figure>
.
Interactions au clavier
Aucune interaction au clavier spécifique à ce rôle.
Fonctionnalités JavaScript requises
Aucune exigence JavaScript spécifique au rôle. Si vous n'avez pas le contrôle sur la sémantique HTML, vous pouvez améliorer l'accessibilité de HTML en ajoutant ces rôles et propriétés avec JavaScript.
Exemples
Nous pourrions étendre l'exemple initial sur la page pour identifier également un paragraphe qui fournit une étiquette descriptive pour la figure en faisant référence à son ID dans aria-labelledby
:
<div role="figure" aria-labelledby="figure-1">
<img
src="diagram.png"
alt="diagramme illustrant les quatre niveaux d'excellence et leur ordre de
priorité relatif — musique, chats, nature et crème glacée" />
<pre>
`
let awesome = ['music', 'cats', 'nature', 'ice cream'];
`</pre
>
<p id="figure-1">Figure 1 : Les quatre niveaux d'excellence.</p>
</div>
Bonnes pratiques
N'utilisez role="figure"
que si vous devez le faire — par exemple, si vous n'avez pas le contrôle sur votre HTML mais que vous êtes en mesure d'améliorer l'accessibilité de manière dynamique après coup avec JavaScript.
Si possible, vous devriez utiliser les éléments HTML sémantiques appropriés pour marquer une figure et sa légende — <figure>
et <figcaption>
. Par exemple, notre exemple ci-dessus devrait être réécrit comme suit :
<figure>
<img
src="diagram.png"
alt="diagramme illustrant les quatre niveaux d'excellence et leur ordre de
priorité relatif — musique, chats, nature et crème glacée" />
<pre>
`
let awesome = ['music', 'cats', 'nature', 'ice cream'];
`</pre
>
<figcaption>Figure 1 : Les quatre niveaux d'excellence.</figcaption>
</figure>
Spécifications
Specification |
---|
Accessible Rich Internet Applications (WAI-ARIA)> # figure> |
See also
- Modèle d'Objet d'Accessibilité (angl.)
- L'ARIA dans le HTML (angl.)
- L'élément HTML
<figure>
- L'élément HTML
<figcaption>