Figuring out how to mark up a figure (thoughts on ARIA role for HTML's figure tag)

For quick accessibility evaluation, I like the a11y.css bookmarklet — a simple, yet helpful tool resting in my bookmarks that highlights potential accessibility issues in a page’s frontend code.

One thing that keeps confusing me is a11y.css displaying a warning about <figure> tags requiring an ARIA role="group" attribute.

Since <figure> has an implicit ARIA role of figure, adding an ARIA role attribute seems redundant at first. After a little research, this recommendation appears to be based on certain browser-screenreader pairings not recognizing this implicit semantic.

While I could not find a formal “requirement” to do this, it is currently recommended by the WAI Web Accessibility Tutorial on “Complex Images”:

The HTML5 <figure> and <figcaption> elements can be used to group image and link semantically. Adding role="group" to the figure maintains backward compatibility with web browsers that don’t support the native semantics of the <figure> element.

Yet, Scott O’Hara has an extensive article about how different screen reader setups consume <figure> tags, and — backed up by tests with various setups — recommends the following, different, markup using a role="figure" attribute:

<figure role="figure" aria-label="repeat figcaption content here">
  <!-- figure content. if an image, provide alt text -->
  <figcaption>
    Caption for the figure.
  </figcaption>
</figure>

Now, which recommendation to follow? Two trustworthy sources seemingly recommend conflicting “best practices”.

Here is how WAI-ARIA defines group as used in the WAI Tutorial…

A set of user interface objects which are not intended to be included in a page summary or table of contents by assistive technologies.

…vs. how figure is defined, as suggested in Scott O’Hara’s recommendation:

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.

Digging deeper, it turns out that there is an open Github issue on the WAI Tutorial page raising this very question; role="figure" was not yet available when that tutorial was first authored and figure might be correct under ARIA 1.1.

Since role="figure" is consistent with the implicit role of <figure> (the Github issue even indicates this might lead to no role being announced at all?), which also seems more specific than that of group, I am for now adopting Scott O’Hara’s suggested markup (and posted to the a11y.css repo’s issues, as I’m curious can a consensus be reached).

Did I miss something? Please post a comment below, send a webmention, or chime in on the linked Github issues — I’m eager to update this post to reflect the entire breadth of the issue.