Le rôlefigure 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

Unefigure 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 utilisantrole="figure".

<div role="figure" aria-labelledby="caption">  <img src="image.png" alt="mettez la description de l'image ici" />  <p>Figure 1&nbsp;: 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 utilisantrole="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 learia-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>Texte qui décrit la figure.</p></div>

• Utilisezaria-labelledby lorsque le texte est une étiquette concise.
• Utilisezaria-describedby lorsque le texte est une description plus longue.
• Utilisezaria-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&nbsp;: La légende</figcaption></figure>

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'attributaria-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 dansaria-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>Figure 1&nbsp;: Les quatre niveaux d'excellence.</p></div>

Bonnes pratiques

N'utilisezrole="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&nbsp;: Les quatre niveaux d'excellence.</figcaption></figure>

Spécifications

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>