loading...
Cover image for Did you know about HTML5 figure tag?

Did you know about HTML5 figure tag?

atulcodex profile image Atul Prajapati ・1 min read

HTML5 introduced the figure element, along with the related figcaption. Used together, these items wrap a visual representation (like an image, diagram, or chart) along with its caption. This gives a two-fold accessibility boost by both semantically grouping related content, and providing a text alternative that explains 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>

Posted on by:

atulcodex profile

Atul Prajapati

@atulcodex

Hi i'm Atul Prajapati and i'm a Creative Web Designer/Developer and Digital Marketer Helping small and medium size businesses to grow online with my creative skills.

Discussion

markdown guide