{"id":771,"date":"2022-08-25T16:08:16","date_gmt":"2022-08-25T16:08:16","guid":{"rendered":"https:\/\/html5accessibility.com\/stuff\/?p=771"},"modified":"2022-08-25T16:08:16","modified_gmt":"2022-08-25T16:08:16","slug":"short-note-on-figure-and-figcaption","status":"publish","type":"post","link":"https:\/\/html5accessibility.com\/stuff\/2022\/08\/25\/short-note-on-figure-and-figcaption\/","title":{"rendered":"short note on figure and figcaption"},"content":{"rendered":"

\"A<\/p>\n

In 2011 when I first started thinking about<\/a> how best to map the semantics of figure\/figcaption<\/code> to accessibility API properties, the set of properties to choose from<\/a> was limited as compared to 2022<\/a>.<\/p>\n

What ended up being implemented in browsers was a naming relationship between the figure<\/code> element and the figcaption<\/code> element. The accessible name for the figure<\/code> element is provided by the content of the figcaption<\/code> element.<\/p>\n

Code example<\/h3>\n

Using ARIA to illustrate the information exposed natively in the Accessibility Tree for the labelledby<\/em> figure\/figcaption<\/code> accessibility mapping.<\/p>\n

<figure role=\"figure\"<\/mark> aria-labelledby=\"figcaption\"<\/mark>>\r\n<img src=\"exercise.jpg\" alt=\"Watching Jonny James\r\npresenting, while riding an exercise bike\">\r\n<figcaption role=\"caption\"<\/mark> id=\"figcaption\"<\/mark>>\r\nThe Lasertour Perceptronics allows you to \r\nexercise your mind while working<\/em> your body\r\n<\/figcaption>\r\n<\/figure><\/pre>\n
Typical expected Aural output<\/h3>\n
figure <\/strong>The Lasertour Perceptronics allows \r\nyou to exercise your mind <\/em>while working your body.<\/em>\r\ngraphic<\/strong> Watching Jonny James presenting<\/em>\r\nwhile riding an exercise bike.<\/em>\r\ncaption<\/strong>\r\nThe Lasertour Perceptronics allows you to \r\nexercise your mind <\/em>while working your body.<\/em>\r\nout of figure<\/strong><\/pre>\n
The figure<\/code> and caption<\/code> role are announced. The figcaption<\/code> element content is announced twice, First as the accessible name for the figure<\/code> element. Secondly as the user cursors through the figcaption<\/code> content. The repetition itself is not a showstopper in the example, but as it has been found that sometimes in the wild figcaption<\/code> text can consist of multiple paragraphs of text, its use as an accessible name becomes unwieldy<\/em> and the repetition becomes obstructive<\/strong>.<\/p>\n
Changes<\/h2>\n
Recently there has been a proposed change in the mapping<\/a>. The labelledby<\/em> relationship is no longer, instead there are\u00a0 details\/detailsfor<\/code> relationships, the figure<\/code> element has a details<\/code> relationship referencing the figcaption<\/code> element and the figcaption<\/code> has a reverse detailsFor<\/code> relationship referencing the parent figure<\/code> All this is provided automatically by the browser, you don’t have to do anything.<\/p>\n
The advantages of this accessibility mapping are that the user will not hear the caption multiple times and the figure<\/code> element is identified as having details and the figcaption<\/code> is identified as the details for the figure<\/code>.<\/p>\n
details\/detailsFor<\/code> relationships are already implemented in Chrome as of now (and other browsers which use the Blink engine).<\/p>\n
These Iaccessible2 API<\/a> relationships are not well exposed in most in browser accessibility tools. I use accProbe<\/a> to view them:<\/p>\n
\"details<\/p>\n
\"detailsFor<\/p>\n
Code example<\/h3>\n
Using ARIA to illustrate the information exposed natively in the Accessibility Tree for the details<\/em> figure\/figcaption<\/code> accessibility mapping.<\/p>\n
<figure role=\"figure\"<\/mark> aria-details=\"figcaption\"<\/mark>>\r\n<img src=\"exercise.jpg\" alt=\"Watching Jonny James\r\npresenting, while riding an exercise bike\">\r\n<figcaption role=\"caption\"<\/mark> id=\"figcaption\"<\/mark>>\r\nThe Lasertour Perceptronics allows you to \r\nexercise your mind while working<\/em> your body\r\n<\/figcaption>\r\n<\/figure><\/pre>\n
Typical expected Aural output<\/h3>\n
figure, has details<\/strong>\r\ngraphic<\/strong> Watching Jonny James presenting<\/em>\r\nwhile riding an exercise bike.<\/em>\r\ncaption, entering details<\/strong>\r\nThe Lasertour Perceptronics allows you to \r\nexercise your mind <\/em>while working your body.<\/em>\r\nout of figure<\/strong><\/pre>\n
Current output<\/h2>\n
As mentioned the details<\/code> relationship is only implemented in chrome as of now, but its effect can be experienced in other browsers by using the aria-details<\/code><\/a> attribute.<\/p>\n
try it yourself<\/h3>\n
See the Pen 
\nfigure\/figcaption test<\/a> by steve faulkner (@stevef<\/a>)
\non CodePen<\/a>.<\/p>\n