HTML Guide for figure
The HTML <figure> element is used to encapsulate media content, such as an image or graphic, along with a descriptive <figcaption>. When a <figcaption> is present within a <figure>, it inherently provides the semantics of the <figure>, making it self-explanatory without needing an additional role attribute.
Explanation
-
<figure> element: Represents self-contained content, potentially with an optional caption specified by a <figcaption> element. This is inherently recognized for its semantics as a figure with a caption.
-
<figcaption> element: Provides a caption or description for the content of the <figure>. This helps in describing the media or content included in the <figure> element.
-
role attribute: This attribute is used to define an explicit accessibility role for an element. However, in cases where the element’s native semantics are explicit and sufficient, such as a <figure> with a <figcaption>, adding a role attribute might override or conflict with the inherent meaning.
Solution
Remove the role attribute from the <figure> element when it contains a <figcaption>.
Example of Incorrect Code:
<figure role="figure">
<img src="cat.jpg" alt="A cute cat">
<figcaption>A cute cat looking at the camera.</figcaption>
</figure>
Corrected Code:
<figure>
<img src="cat.jpg" alt="A cute cat">
<figcaption>A cute cat looking at the camera.</figcaption>
</figure>
In the corrected example, the <figure> element does not have a role attribute, allowing it to maintain its inherent semantic value.