Code examples

Consider making simple charts from semantic markup

<dl class="bar-chart">
  <dt>Monthly usage</dt>
  <dd class="percentage-57">
    <span class="date">March</span>
    <span class="value">57%</span>
  <dd class="percentage-42">
    <span class="date">April</span>
    <span class="value">42%</span>
  <dd class="percentage-91">
    <span class="date">May</span>
    <span class="value">91%</span>
Monthly usage
March 57%
April 42%
May 91%

Provide alternative ways to consume visual content

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

<img src="monthly-usage-chart.jpg" 
     alt="Usage shows a large jump in May to 91%">

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.

2020 sales by item
2020 sales
Breakdown of 2020 sales percentages by item
Toilet paper Bread makers Moving boxes Exercise mats
38% 18% 12% 32%
    alt="2020 sales by item">

      2020 sales

    <table id="sales-breakdown">
          Breakdown of 2020 sales percentages by item
            <th scope="column">
              Toilet paper
            <th scope="column">
              Bread makers
            <th scope="column">
              Moving boxes
            <th scope="column">
              Exercise mats

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" 
      aria-label="Location search">
  <label for="search">
    Search for a location
  <input type="search" id="search">
  <button type="submit">

Design notes

Developer notes


  • Use alt="Descriptive 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