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>
  <dd class="percentage-60">
    <span class="date">April</span>
    <span class="value">60%</span>
  </dd>
  <dd class="percentage-90">
    <span class="date">May</span>
    <span class="value">90%</span>
  </dd>
</dl>
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.

<figure>
  <img
    src="/assets/images/examples/pie-chart.png"
    alt="2020 sales by item">

  <details>
    <summary>
      2020 sales by item
    </summary>

    <table id="sales-breakdown">
        <caption>
          2020 sales by item
        </caption>
        <thead>
          <tr>
            <th scope="column">
              Toilet paper
            </th>
            <th scope="column">
              Bread makers
            </th>
            <th scope="column">
              Moving boxes
            </th>
            <th scope="column">
              Exercise mats
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              38%
            </td>
            <td>
              18%
            </td>
            <td>
              12%
            </td>
            <td>
              32%
            </td>
          </tr>
        </tbody>
      </table>
  </details>
</figure>
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.

<map-embed></map-embed>

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

Developer notes

Name

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

Role

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

Group

  • 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