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.
<div role="figure" aria-labelledby="caption"> <img src="image.png" alt="full alternative image description"> <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
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
There are no hard and fast rules about how you should write your figure content. You should make sure that they are accessible just like any other content. For example, make sure they are perceivable by users of assistive technology, navigable by keyboard as well as mouse, etc.
If you wish to add a caption or label to your figure, you can do so in a number of ways. You could add an ID to an element containing content that describes the figure, and then reference that ID inside an appropriate attribute on the figure to associate the figure with the label:
<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.
<figure> ... <figcaption>Text that describes the figure.</figcaption> </figure>
If you don't want the label to be visible on the screen, but still want to provide a descriptive label for assistive technology users, you can use the
aria-label attribute on the figure container:
<div role="figure" aria-label="Text that describes the figure."> ... </div>
You can use the aria-label with <figure> as well:
<figure aria-label="Text that describes the figure."> ... </figure>
Generally, you should reference the figure from the main text, but the figure need not be displayed at the same location as the referencing element.
Associated WAI-ARIA Roles, States, and Properties
- The id of an element contatining 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-label on 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><code> let awesome = ['music', 'cats', 'nature', 'ice cream']; </code></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><code> let awesome = ['music', 'cats', 'nature', 'ice cream']; </code></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.
Screen reader support