ARIA: figure role
figure role can be used to identify a figure inside page content where appropriate semantics do not already exist. A figure is generally considered to be one or more images, code snippets, or other content that puts across information in a different way to a regular flow of text.
figure is a perceivable section of content that typically contains a graphical document, images, code snippets, or example text. The parts of a figure MAY be user-navigable. Any content that should be grouped together and consumed as a figure (which could include images, video, audio, code snippets, or other content) can be identified as a figure using
<div role="figure" aria-labelledby="caption"> <img src="image.png" alt="put image description here"> <p id="caption">Figure 1: The caption</p> </div>
In the above example, we have a figure that consists of two separate content items — an image and a caption. This is wrapped by a
<div> element that identifies the content as a figure using
For HTML, use the
<figcaption> elements. The figcaption will serve as the accessible name for the figure. When not using HTML, or when retrofitting legacy HTML, use the
aria-labelledby on the figure, pointing to the figure's caption.
If there is no visible caption,
aria-label can be used.
<div role="figure" aria-labelledby="figure-1"> ... <p id="figure-1">Text that describes the figure.</p> </div>
aria-labelledbywhen the text is a concise label.
aria-describedbywhen the text is a longer description.
aria-labelwhen there is no visible figure caption.
<figure> <img src="image.png" alt="put image description here"> <caption>Figure 1: The caption</caption> </figure>
The id of an element containing reference text serving as a caption.
The id of an element containing text serving as a label.
If there is no element containing text that could serve as a label, you can add the label directly as a value on the
aria-labelon the element with the
figurerole or on the
No role specific keyboard interactions.
We could extend the initial example on the page to also identify a paragraph that provides a descriptive label for the figure by referencing its ID in
<div role="figure" aria-labelledby="figure-1"> <img src="diagram.png" alt="diagram showing the four layers of awesome and their relative priority order — music, cats, nature, and ice cream"> <pre>` let awesome = ['music', 'cats', 'nature', 'ice cream']; `</pre> <p id="figure-1">Figure 1: The four layers of awesome.</p> </div>
If at all possible, you should use the appropriate semantic HTML elements to mark up a figure and its caption —
<figcaption>. For example, our above example should be rewritten as follows:
<figure> <img src="diagram.png" alt="diagram showing the four layers of awesome and their relative priority order — music, cats, nature, and ice cream"> <pre>` let awesome = ['music', 'cats', 'nature', 'ice cream']; `</pre> <figcaption>Figure 1: The four layers of awesome.</figcaption> </figure>
|Accessible Rich Internet Applications (WAI-ARIA) 1.1
The definition of 'figure' in that specification.
|WAI-ARIA Authoring Practices 1.2
The definition of 'Describing with captions' in that specification.