Accessibility Library

Figure

Used for element grouping, for example, images and captions.

Aria attributes

Name Description
aria-label If there is no element containing text that could serve as a label, you can add the label directly as a value on the aria-label on the element with the figure role or on the <figure> element.
aria-describedby The id of an element containing reference text serving as a caption.
aria-labeledby The id of an element containing text serving as a label.

Live Example

figure 1 image

Description for figure 1

figure 2 image

Description for figure 2

Code sample

<article>
                <figure>
                    <p><img src="example.png" alt="figure 1 image"></p>
                    <figcaption>Description for figure 1</figcaption>
                </figure>
                <figure>
                    <p><img src="example.png" alt="figure 2 image"></p>
                    <figcaption>description for figure 2</figcaption>
                </figure>
            </article>