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
<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”:
<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
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
<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.
figure is defined, as suggested in Scott O’Hara’s recommendation:
sectionof content that typically contains a graphical document, images, code snippets, or example text. The parts of a
figureMAY 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.
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.