Code examples

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.

<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>
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