Is the figure tag overused in WordPress?

Introduction

In the WordPress world, wrapping every image in a <figure> tag has become increasingly popular. It’s often seen as a way to improve semantics, accessibility, search engine optimisation (SEO) (search engine optimisation) and to provide an extra wrapper for styling purposes. But is it always the right move? Let’s delve into the <figure> tag, understand its purpose, and consider if its use in WordPress is becoming excessive.

Why semantic HTML matters

Understanding HTML’s semantic elements, like <figure>, is important for enhancing web experience. These elements add meaning to your content, improve accessibility for users with disabilities, and boost SEO. However, like any tool, they can be misused.

There are over 100 semantic elements in HTML, and I encourage you to use them thoughtfully in your projects.

What is the figure element?

The <figure> element represents a self-contained unit of content, often accompanied by a caption (<figcaption>). This content could be an image, illustration, diagram, code snippet, or any other media that complements the main content. Importantly, a <figure> is referenced as a single unit and can be moved without disrupting the document’s overall meaning.

To visualise this, imagine a figure in a research paper—a chart, graph, table, or image—complete with a descriptive caption and references within the text, like “See Figure 4.2 below” or “according to Table 4.1…”.

When to use a figure tag

The <figure> tag excels in situations where you want to:

• Highlight self-contained content: If you have a piece of content that stands alone and provides additional context or illustration to your main text, <figure> is a suitable choice.
• Provide a caption: Use a <figure>, if you want to offer a concise description or explanation of the figure’s content, which could be a single image, video, group of images or other related content.

When not to use a figure element

While the <figure> is useful, there are cases where a plain <img> tag or a different wrapper element is more appropriate:

1. Purely Decorative Images: If an image is purely decorative and doesn’t contribute to understanding the content, a plain <img> tag is often better. Examples include background images, visual separators, or icons used for styling.
2. Images Tightly Integrated into Text: When an image is closely connected to the surrounding text and acts as an inline element, using a <figure> might disrupt the text flow. In this case, a regular <img> tag is preferred.
3. Groups of Images Forming a Gallery or Slideshow: If you have a collection of images presented as a gallery or slideshow, using a <figure> for each image would add unnecessary structure. Consider using a <div> or a more specific container like <ul> (unordered list) or <ol> (ordered list) for the overall structure, with <img> tags for the individual images. Unless you need to add captions for individual images.
4. Images Used as Links: If an image serves as a clickable link, such as your site logo, using a <figure> might introduce complications. It’s generally simpler to wrap the <img> tag directly within the <a> (anchor) tag.

Things to watch out for

• The <figcaption>, if present, must be the first or last child of the <figure>.
• The <figcaption> must be a direct descendant of the <figure>, not nested within any other element (even a div).
• The <figcaption> must be placed inside the <figure>, not outside.
• Don’t replace the image’s alt text with the <figcaption>. They have different purposes – the alt text primarily describes the image itself, while the <figcaption> provides more context about the image or other content in the context of the main page.

• The <figure> should be self-contained, not part of the surrounding sentence.

  An example showing when not to use <figure> tags, directly pulled from the HTML Living Standard:

  <h2>Malinko's comics</h2>
  
  <p>This case centered on some sort of "intellectual property"
  infringement related to a comic (see Exhibit A). The suit started
  after a trailer ending with these words:
  
  <blockquote>
   <img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!">
  </blockquote>
  
  <p>...was aired. A lawyer, armed with a Bigger Notebook, launched a
  preemptive strike using snowballs. A complete copy of the trailer is
  included with Exhibit B.

Figure vs. Aside

It’s worth noting the distinction between <figure> and <aside>. While both can be used to structure content, the <figure> element is intended for content directly related to the main content, although its exact position in the document is not important.

For content that is only tangentially related or serves a separate purpose from the surrounding flow, the aside element should be used (and can itself wrap a figure). For example, a list of related posts, adverts, etc. Also, a pull-quote that repeats content from an article would be more appropriate for an aside than a figure because it isn’t part of the content, but rather a repetition of the content for the purposes of enticing readers or highlighting key topics.

The misuse of semantic HTML

Misusing semantic elements can have some unintended consequences:

• Confusing Assistive Technologies: Screen readers, which many visually impaired users rely on, might stumble over incorrect semantic markup. This can make your content more difficult to understand due to wrong interpretation or lots of noise.
• Misleading Search Engines: Incorrect semantic markup can potentially send the wrong signals to search engines, impacting your SEO.

WordPress Gallery Block: A case study

The WordPress gallery block is a prime example of potential <figure> tag overuse. It wraps both the entire gallery and each image in <figure> tags. While semantically correct, this can lead to redundant announcements for screen reader users.

Although the WordPress gallery block allows us to add captions to individual figure elements, it doesn’t allow us to a caption to the wrapper figure element.

Testing with NVDA on Firefox, showed that each image in the gallery block gets announced as “Figure. Figure. the image alt text. Graphic.” Chrome, on the other hand, simply ignores the figure tag.

On further testing, I discovered that Firefox and Chrome have differences in the way they handle the <figure> and <figcaption> elements.

1. Firefox announces the implicit role="figure" of the <figure> element whereas for Chrome, you explicitly have to set a role="figure" to get announced.
2. Firefox exposes <figcaption> as the accessible name of the <figure> element while Chrome exposes it as the “details” attribute for the figure. Chrome only gives the figure an accessible name when the aria-label attribute is used. Other attributes like aria-labelledby don’t seem to work.

Conclusion

While I’m all for accessible websites and semantic HTML, we can sometimes overuse elements, creating noise for assistive technology users.

I would really love for the WordPress team to make the figure tag in the image block optional. You cannot predict every possible scenario where an element would be used so I believe in being flexible. Create a default but give users the ability to overwrite the defaults. I don’t mean relying on custom blocks.

I encourage you to explore the <figure> element further and share your thoughts in the comments.

Further reading

1. MDN Docs – The figure element with optional caption element
2. HTML.com – HTML Figure Element: Here’s How It Identifies Self-Contained Content
3. HTML – The Living Standard
4. Sitepoint – The right way to use figure & figcaption elements