Skip to content

Improve Chart Accessibility with the figure Element

HTML5 introduced the figure element and the related figcaption. Used together, these items wrap a visual representation (like an image, diagram, or chart) along with its caption. Wrapping these elements together gives a two-fold accessibility boost by semantically grouping related content and providing a text alternative explaining the figure.

For data visualizations like charts, the caption can be used to briefly note the trends or conclusions for users with visual impairments. Another challenge covers how to move a table version of the chart's data off-screen (using CSS) for screen reader users.

Here's an example - note that the figcaption goes inside the figure tags and can be combined with other elements:

<figure>
  <img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
  <br>
  <figcaption>
    Master Camper Cat demonstrates proper form of a roundhouse kick.
  </figcaption>
</figure>

Camper Cat is hard at work creating a stacked bar chart showing the amount of time per week to spend training in stealth, combat, and weapons. Help him structure his page better by changing the div tag he used to a figure tag, and the p tag that surrounds the caption to a figcaption tag.

Tests

  • Waiting: 1. Your code should have one figure tag.
  • Waiting: 2. Your code should have one figcaption tag.
  • Waiting: 3. Your code should not have any div tags.
  • Waiting: 4. Your code should not have any p tags.
  • Waiting: 5. The figcaption should be a child of the figure tag.
  • Waiting: 6. Your figure element should have a closing tag.
/**
* Your test output will go here
*/