• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Digital A11Y

Digital A11Y

Your Accessibility Partner

  • About
  • Articles
  • WAI-ARIA
  • WCAG
  • Resources
    • Cheat Sheets
    • A11Y Blogs
    • A11Y Toolkit
  • Contact

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.

Example

HTML5 Example

<figure id="fig1" role="figure region">
<svg id="fig1A" class="nested-figure" role="figure"
aria-labelledby="fig1-caption, fig1A-caption">
<!-- markup omitted-->
</svg>
<svg id="fig1B" class="nested-figure" role="figure"
aria-labelledby="fig1-caption, fig1B-caption">
<linearGradient id="reflect" spreadMethod="reflect"
xlink:href="#repeat" />
<text id="fig1B-caption" class="caption" dy="1em"
>b) spreadMethod="reflect"</text>
<rect role="img"
y="25%" width="100%" height="75%" fill="url(#reflect)" >
<title>A reflecting linear gradient</title>
<desc>The gradient again starts dark, slowly shifting to light, 
then quickly dark again. However, the next repeat shifts
quickly to the light, then slowly back dark. 
The original pattern is then repeated, followed by the reflected
version again.
</desc>
</rect>
</svg>
<figcaption id="fig1-caption"
>Figure 1: Repeating SVG gradients</figcaption>
</figure>

Characteristics

Superclass Role

  • section

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)

Share A11Y Love

  • Twitter
  • LinkedIn
  • Facebook
  • Reddit

Primary Sidebar

Get Digital A11Y in Your Inbox

Recent A11Y Articles

  • Understanding SC 4.1.3 Status messages
  • Understanding SC 2.5.4 Motion Actuation
  • Understanding SC 2.5.3 Label in Name
  • Knowbility looking for mentors in its Accessible Internet Rally
  • Understanding SC 2.5.2 Pointer Cancellation

Recent Comments

  • Al on Understanding SC 4.1.2 Name, Role, Value
  • Randy on Screen Readers & Browsers! Which is the Best Combination for Accessibility Testing?
  • Raghavendra Satish Peri on Screen Readers & Browsers! Which is the Best Combination for Accessibility Testing?
  • Raghavendra Satish Peri on Understanding SC 1.4.12 Text Spacing
  • Raghavendra Satish Peri on Understanding SC 4.1.2 Name, Role, Value

A11Y Categories

  • Design
  • Events
  • HTML
  • IOS
  • Mobile Accessibility
  • News
  • Tools
  • Uncategorized
  • WAI-ARIA
  • WCAG
  • Web Accessibility

  • Privacy Policy
  • Sitemap
© 2021 Digital A11Y