Code examples

Consider making simple charts from semantic markup

<dl class="bar-chart">
  <dt>Monthly usage</dt>
  <dd class="percentage-70">
    <span class="date">March</span>
    <span class="value">70%</span>
  <dd class="percentage-60">
    <span class="date">April</span>
    <span class="value">60%</span>
  <dd class="percentage-90">
    <span class="date">May</span>
    <span class="value">90%</span>
Monthly usage
March 70%
April 60%
May 90%

Provide alternative ways to consume visual content

If there is one primary message for an image chart, describe it in the alt attribute.

<img src="pie-chart.jpg" 
     alt="Sales forecast show June 34% higher">

Provide alternative ways to consume data

If you have a figure that can’t be described by alt text, place the content in a different format.

    alt="2020 sales by item">

      2020 sales by item

    <table id="sales-breakdown">
          2020 sales by item
            <th scope="column">
              Toilet paper
            <th scope="column">
              Bread makers
            <th scope="column">
              Moving boxes
            <th scope="column">
              Exercise mats
2020 sales by item
2020 sales by item
2020 sales by item
Toilet paper Bread makers Moving boxes Exercise mats
38% 18% 12% 32%

Provide alternative interactions with dynamic figures

When building maps, add a search or filtering feature for those who can’t use a mouse.


<form role="search" action="/map/">
  <label for="search">
    Search for an location
  <input type="search" id="search">
  <button type="submit">

Developer notes


  • Use alt="Figure content" for images
  • Supply a heading for interactive figures or aria-label="Figure name" can be used as well.


  • Wrap charts and tables in a <figure> element where applicable.
  • Include <figcaption> to describe the figure
  • Use <cite> to label sources.


  • Provide alternative ways to consume content
    • Examples:
      • A map of phone coverage areas includes a search function
      • A chart embedded as an image includes a table of the data