The Caption

Alternative text and captions are the most commonly used methods to describe images. However, depending on the complexity or overall function of an image, other image description approaches may be more suitable.

This web page will provide you with tips and tricks to provide text descriptions for your image based on the complexity and functionality of your image and the recommended approaches to incorporate the image description on your web page.

What are captions for images?

Captions for images are text descriptions of an image that are displayed on a webpage.Captions provide supplemental information about what the image is conveying. 

What are the benefits of using image captions?

Captions are the universal design recommended approach to providing text alternatives to images.  Captions are a great alternative to ensure everyone has equal access to the image description because they are displayed within the main content and can be read by assistive technology. A common malpractice with alt text is providing additional information about an image within the alt text that is not otherwise seen in the image. This will put sighted users at a disadvantage because they will not see the alt text. Captions are available to both sighted and non-sighted users, thus allowing the greatest amount of access to information about an image.

When should an image need a caption?

As with alt text, an image requires a caption if it conveys important information. Captions work best for:

• Images that require a heading to understand the context of the image: For example, portraits of people or pictures of geographic locations may benefit from a caption to ensure everyone is aware of what the image is about.  

• Images that require supporting or additional information: Some images may present symbols or signs that require additional explanation. A caption will allow both sighted and non-sighted users to know what that additional information is.  

• Images that are complex: Some images that are complex may benefit from a caption. However, these images would benefit from a caption as long as the caption is not too long. If the caption overwhelms the user and takes up too much space, there may be other methods to provide a text alternative. Refer to the complex images section for alternatives.  

• Images that are using long description: The long description has been used as alt text for images that require more than one sentence. However, some modern programming languages and browsers may not support the full functionality of the long description. Captions, therefore, may be the alternative solution to avoid compatibility issues.

NOTE: When using <figure> and <figcaption> elements, the alt text attribute still should be provided.

Difference between the alternative text of an image and the caption

• The image alternative makes it possible to describe what the image conveys that is not in the context;
• The caption of an image conveys additional information that the image does not convey.

How to add captions to an image

 In HTML5, the “figcaption” element is used to provide caption for an image. The “figcaption” provides a description for a “figure” element that would be programmatically associated with the image.

Syntax:

 <figure> <figcaption> text </figcaption> </figure>

Full code view: 

<figure>

  <img src=”Periodic_Table_of_Elements_Nobel_Gases.png” alt=”Periodic Table of Elements”>

 <figcaption> Periodic Table of Elements with the Nobel gases emphasized in red. The Nobel gases are He- Helium, Ne- Neon, Ar- Argon, Kr- Krypton, Xe- Xenon, Rn- Radon </figcaption>

</figure>

Examples of captions for images:

The image below (Example 3) is an example of an image that benefits from a caption instead of alt text. The image is a portrait of a famous historical figure, Sir. Isaac Newton. Users who are not familiar with this historical figure will require a text description to know who this person is. A caption will provide both sighted and non-sighted users this information.

Example 3: Portrait of Sir. Issac Newton

The next example (Example 4) is an image of a basic structure of a periodic table that is highlighting the Nobel gases column and is only displaying the symbol of the elements and not the full name of the elements.  If a user is not familiar with the naming of chemical elements, providing the name of the symbol within alt text will not help sighted users understand what the symbols represent. Instead, providing this information through a caption will benefit both sighted and non-sighted users.  

Example 4: Periodic Table of Elements with the Nobel gases emphasized in red. The Nobel gases are: He- Helium, Ne- Neon, Ar- Argon, Kr- Krypton, Xe- Xenon, Rn- Radon

The final image (Example 5) is a complex image. It displays a bar graph and each bar represents people in the U.S with a particular kind of disability. The caption for this image is slightly long, but not too long where it overwhelms the page. However, if the description for an image is too long, a caption may not be a suitable method to provide a text alternative.

Example 5:The bars represent the number of people (in millions) with disabilities in the United States. The bars show that 1.8 million people have visual impairments, 1.0 million hearing impairments, 14.3 million people have cognitive mental disabilities are 14.3 million and 11.8 million have ambulatory or fine motor disabilities are 11.8 million. This data is coming from the U.S. Census Bureau.