Figure and caption (figure-figcaption)

Ensure captioned images and diagrams are marked up with a <figure> element containing a <figcaption>.


Aria-labelledby instead of <figcaption>

In this example there is used aria-labelledby instead of <figcaption>.


Network diagram

The business plan includes marketing, strategy, finance...


<figure aria-labelledby="caption-text">
  <img src="../../../assets/images/diagram.png" width="500" alt="Network diagram" />
</figure>
<p id="caption-text">The business plan includes marketing, strategy, finance...</p>

Note: Impossible to automatically test/detect whether the aria-labelledby attribute is being misused as a caption instead of a proper <figcaption>. Requires a human tester or AI to determine whether the referenced text should actually be a <figcaption>.

axe detected: none  |  QualWeb detected: none