Skip to Main Content
Perplexed Owl Random Ponderings

Benjamin ‘Benilda’ Key:

Figure and Figcaption

Screen Reader Reliability Testing

Introduction

This page demonstrates the use the figure element, the figcaption element, and the img element, as follows.

<figure>
  <img src="1234.png">
  <figcaption>A PNG file containing the text 1234...</figcaption>
</figure>

Several variations are demonstrated related to whether the alt attribute of the img element is specified and what value is assigned to the alt attribute.

Tests

Figure and Figcaption, img does not have alt attribute

In the following example the alt attribute of the img element is not specified.

A PNG file containing the text 1234. The alt attribute is not specified.

Figure and Figcaption, img has empty alt attribute

In the following example the alt attribute of the img element is set to an empty string.

A PNG file containing the text 1234. The alt attribute is an empty string.

Figure and Figcaption, img has alt attribute containing only a space

In the following example the alt attribute of the img element contains only a space.

A PNG file containing the text 1234. The alt attribute is a single space.

Figure and Figcaption, img has alt attribute

In the following example the alt attribute of the img element is used to provide an accessible name for the element.

1234
A PNG file containing the text 1234. The alt attribute is a non-empty string.

Note that the various examples that demonstrate the use of the figure element, the figcaption element, and the img element on the HTML Standard page follow this pattern. This implies that this may be the correct pattern.

Back to top