Using figcaption and visually-hidden HTML Image Description Design and the Difference from alt

On many websites, images are supplemented with descriptions using the alt attribute (alternative text).

However, HTML also provides elements called figure and figcaption, which are designed to describe images in a more semantic way.

In addition, by using the CSS technique visually-hidden, it is possible to add supplementary explanations without affecting the visual design.

By combining these appropriately, the semantic structure of HTML becomes clearer and accessibility (the practice of making content available to all users) can be improved.

Ideally, diagrams and structured information should be expressed using HTML and CSS alone. However, in the case of complex diagrams or infographics, they sometimes need to be created as images for design or production reasons.

The growing use of AI tools has also made it easier than ever to create and work with infographics and diagrams.

Even in such cases, using figure and visually-hidden allows the image and its explanation to be semantically connected.

In practical website development, however, it is often difficult to clearly understand the difference between alt and figcaption, or how they should be used appropriately.

In this article, we will explain what figcaption is as part of HTML image description design, how it differs from alt, the role of visually-hidden, and how these elements can be used in real-world website development.

figcaption is an HTML element used to write a description of a figure or image within a figure element.

For example:

<figure>
  <img src="example.jpg" alt="Example installation of a well water cooling system">
  <figcaption>Example installation of a well water cooling system</figcaption>
</figure>

In this structure:

1. figure represents a grouped visual element
2. img represents the image itself
3. figcaption represents the description of the figure

This element can be used not only for photos but also for diagrams, graphs, illustrations, and infographics—any visual content that conveys meaning.

Both the alt attribute and figcaption relate to image descriptions, but their roles are different.

Simply put:

• alt is a summary of the image
• figcaption is a description of the figure

For example:

<figure>
  <img src="diagram.jpg" alt="Diagram showing an example of a well water cooling system installation">
  <figcaption>
  An example installation of a well water cooling system where well water passes through a heat exchanger to provide cooling.
  </figcaption>
</figure>

In general:

• Write a short summary of the diagram in alt
• Provide a more detailed explanation in figcaption

visually-hidden is a CSS technique that hides content visually while keeping it accessible to screen readers.

In Bootstrap 5, this class (.visually-hidden) is provided by default.

If you implement it yourself, the following CSS is commonly used:

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

This works by:

• Removing the element from the normal document flow using position: absolute
• Reducing its size to 1px
• Hiding overflow content with overflow: hidden

The clip property helps ensure the element remains visually hidden across older browsers as well.

Elements with this class are not visible on screen, but they remain in the HTML structure and can still be read by screen readers.

This technique is widely used for accessibility-friendly hidden text.

Normally, figcaption appears as a caption below the image.

However, depending on the design, you may prefer not to display captions visually. If you remove them entirely, the semantic structure of the HTML is also lost.

By using visually-hidden, you can keep the figcaption in the HTML structure while hiding it visually.

Search engines may also use nearby text to better understand the context of an image.

<figure>
  <img src="example.jpg" alt="Infographic">
  <figcaption class="visually-hidden">
    Diagram summarizing the features of a low-cost, high-quality website creation service
  </figcaption>
</figure>

Why Can’t You Just Use opacity: 0 or display: none?

When the goal is simply to hide something from view, properties like opacity: 0 (make it transparent), visibility: hidden (make it invisible), or display: none (remove it from display) might seem like obvious solutions.

However, none of these behave as intended when it comes to screen reader accessibility.

Both display: none and visibility: hidden hide the element from screen readers as well as from the visual display. opacity: 0 may be picked up by some screen readers, but its behavior is not consistent across environments.

To reliably meet the requirement of hiding content visually while still delivering it to screen readers, a dedicated approach is needed—one that removes the element from the layout flow, collapses its dimensions to near zero, and clips it using the clip property. This is exactly what the visually-hidden technique is designed to do.

This approach allows you to:

• Maintain your visual design
• Preserve the semantic HTML structure
• Improve accessibility at the same time

figcaption itself does not directly have a major impact on search rankings.

However, it functions as contextual text around images, helping explain their content.

In other words:

• alt is essential
• figcaption is supplementary

For diagrams or infographics where the meaning is not obvious from the image alone, a descriptive caption can still be useful.

Photos

In most cases, the alt attribute alone is sufficient.
Use figcaption only when necessary.

<img src="office.jpg" alt="AEDI office">

Diagrams

A good structure is to:

• Write a summary of the diagram in alt
• Provide a detailed explanation in figcaption

Illustrations

Illustrations are treated similarly to photos.
Describe the illustration using alt, and use figcaption only if additional explanation is needed.

Infographics

Because infographics often contain large amounts of information:

• Use alt for a summary
• Use figcaption for a more detailed explanation

By combining this with visually-hidden, you can keep the figcaption in the HTML while preserving the visual design.

Simple HTML + CSS

<figure>
  <img src="image.jpg" alt="Description of the image">
  <figcaption class="visually-hidden">
    Description of the diagram
  </figcaption>
</figure>

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

When Using Bootstrap

In Bootstrap 5, the .visually-hidden class is already provided, so you can use it without adding additional CSS.

<figcaption class="visually-hidden">
  Description of the figure
</figcaption>

When Using WordPress

The same structure can also be created using the WordPress block editor.

1. Insert an Image block
2. Enter a caption
   (When selecting an image from the media library, you can enter it in the caption field.)
3. Select the image block and open Advanced settings in the right panel
4. Enter a custom class name in Additional CSS Class

In this example, we use the class name infographic (it does not have to be visually-hidden).

Then add the following CSS using a Custom HTML block, or add it to your theme’s stylesheet.

.infographic figcaption {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

This allows the caption to remain in the HTML structure while being hidden visually.

In WordPress, the class added to the image block is applied to the figure element, so the CSS must target figcaption specifically.

SimpleTastes Blog Article

An infographic is used in the SimpleTastes blog article titled:

“Why Low-Cost, High-Quality Website Creation Is Possible – The Five Mechanisms Behind SimpleTastes,” published on March 12, 2026.

SimpleTastes is a sister brand of AEDI’s website creation services, focusing on low-cost website development.

In this article, the figcaption is visually hidden using visually-hidden (in this case, the class name used is infographic).

For the infographic in this article:

• alt → Summary of the diagram
• figcaption → Explanation of the diagram

This structure creates a semantically meaningful image description in HTML.

Since the SimpleTastes website is built with WordPress and Bootstrap, it is also possible to use the .visually-hidden class included in Bootstrap 5. We plan to explain this in more detail on the SimpleTastes website in the future.

In HTML image description design, the following roles are fundamental:

HTML is not only a language for creating visual layouts—it is also a language for designing meaning.

Using figcaption and visually-hidden appropriately helps create websites that are carefully structured, even in the parts users do not see.

Instead of simply placing an img tag, thinking about how images should be described helps improve both semantic structure and accessibility.

In particular, when using diagrams or infographics, consider actively using a combination of figcaption and visually-hidden.