WAI-ARIA: ROLE=FIGURE
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.
Description
New in ARIA 1.1
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.
Authors SHOULD provide a reference to the figure from the main text, but the figure need not be displayed at the same location as the referencing element. Authors MAY reference text serving as a caption using aria-describedby. Authors MAY provide a label using aria-label or MAY reference text serving as a label using aria-labelledby.
Assistive technologies SHOULD enable users to quickly navigate to figures. Mainstream user agents MAY enable users to quickly navigate to figures.
Role=Figure Example
<div role="figure" aria-labelledby="caption">
<img src="image.png" alt="put image description here" />
<p id="caption">Figure 1: The caption</p>
</div>Characteristics
Superclass Role
Related Concepts
- HTML figure
Inherited States and Properties
- aria-atomic
- aria-busy (state)
- aria-controls
- aria-current (state)
- aria-describedby
- aria-details
- aria-disabled (state)
- aria-dropeffect
- aria-errormessage
- aria-expanded (state)
- aria-flowto
- aria-grabbed (state)
- aria-haspopup
- aria-hidden (state)
- aria-invalid (state)
- aria-keyshortcuts
- aria-label
- aria-labelledby
- aria-live
- aria-owns
- aria-relevant
- aria-roledescription
Name From
- author
Accessible Name Required
- False
Semantic HTML
Use the HTML5 <figure> tag for non-interactive figures.
<figure><img src="/img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"></figure>The role “figure” is meant to surround user-navigable information, which may contain content ranging from graphical images to textual code fragments to mathematical equations. As such, the content of a figure is navigable in the same manner as a named region or landmark.
A figure may be explicitly named using either aria-labelledby or aria-label, or even reference an external caption using aria-describedby.
Reference
W3C (opens new window)
