Using <h4> in a <figure> to record title content within XHTML

[KD-3240]

Could you please assist us with the following issue?

We decided to record title content within a <figure> element by using an <h4> inside <header>. However, it appears various accessibility readers have interpreted our solution as inaccessible. We feel their decision is incorrect and request clarification.

The following is the background to the issue to better explain how we got to our current position.

No <title> element is available for <figure>. There is a @title available, but this is for adding tooltips and therefore would not be appropriate. A <figcaption> does exist, but we hold there is a difference between a title and a caption.

Example:
Title: The Eiffel Tower
<an image of the Eiffel Tower goes here>
Caption: The Eiffel Tower was built in ... . People first felt ... . But it soon became ... .

In the above, the title provides a brief declaration as to what the image is about while the caption provides more detailed information. This difference between title and caption is one held by many (if not most) publishing companies. It is also common practice to first show the title, follow that with the image, and then have the caption below the image (though some variance in presentation order does differ). Combining the title and the caption into one element would therefore prove difficult, and it would also be semantically incorrect. (Each type of content should have its own element.)

The decision was therefore made to place a <header> inside the <figure> and an <h4> inside the <header> with the desired @Class values to control appearance. This would be our stand in for the title.
Example:
<figure class="figureClass">
<header>
<h4 class="heading4Class">The title</h4>
</header>
…
The above has been called out as inaccessible though given the <figure> would not always be inside an <h3> section of the document. It could fall under an <h1> or an <h2> instead.
However, https://www.w3.org/TR/2011/WD-html5-author-20110809/headings-and-sections.html#sectioning-root states certain elements (such as <figure>) are sectioning roots and the sections and headers in these elements do not contribute to the outline of their ancestors, i.e., the header/h4 inside <figure> should not be applied to the overall document but instead exists only locally within that <figure>.

Also, the statement an <h4> belongs inside an <h3> section appears to come from ‘WCAG 2.1 2.4.10 Section Headings’ (https://www.w3.org/TR/WCAG21/#section-headings ). But 2.4.10 as it states applies to section headings, and a section is defined at https://www.w3.org/TR/WCAG21/#dfn-section as “a self-contained portion of written content that deals with one or more related topics or thoughts.” This would not apply to a figure.

It therefore appears from the above our choice is both a valid use of HTML and accessible. The various screen readers should therefore honor it.

Could you please clarify if we have misinterpreted any of the quotes cited above or overlooked some other bit of documentation? Or would you too agree our use of header/h4 to record title content is both valid and accessible?

[rthrejheytjyrtj545]

Use any element, but link it to figure with aria-labelledby.

Your argument about heading levels was never valid because there were no real world implementations of it. See #7829 for more.

[KD-3240]

Thanks for the reply.

Re: Use any element, but link it to figure with aria-labelledby.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby states "The purpose of aria-labelledby is the same as that of aria-label. It provides the user with a recognizable, accessible name for an interactive element. "

Neither the title or the figure are interactive, and so aria-labelledby does not appear to fit per the above quote.

#7829 cites https://html5accessibility.com/stuff/2022/04/05/12-years-beyond-a-html-joke/ which itself cites https://html.spec.whatwg.org/multipage/sections.html#headings-and-sections. This appears to be for headings in sections. That documentation states: "The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading."

A figure is not a thematic grouping of content and so that documentation would not appear to apply.

All this, however, seems to be beating around the bush. A work around is being used and we are asking if that work around is both valid and accessible when judged against the documentation, but a more accurate solution might be if a <title> element could be added to <figure>.

[rthrejheytjyrtj545]

Authors MAY provide a figure an accessible name using aria-label or use aria-labelledby to reference other text in the page to serve as the element's label and accessible name.

Authors MAY provide a figure a caption which can include its name, descriptive text, or both. If a caption is provided, and it serves as a description to the contents of the figure, authors SHOULD associate it to the figure element using aria-details.

https://w3c.github.io/aria#figure

[KD-3240]

Thanks again for your time and help.

[rthrejheytjyrtj545]

For example:

<figure aria-labelledby = figure-title aria-details = figure-caption>
   <figcaption role = caption id = figure-caption>
      <b aria-hidden = true id = figure-title>Title.</b>
      Caption...

Or:

<figure aria-labelledby = figure-title aria-details = figure-caption>
   <header id = figure-title>Title.</header>
   <figcaption role = caption id = figure-caption>Caption...

[domenic]

Please use https://StackOverflow.com for coding help questions.