Charts and Graphs

Charts and graphs are visual ways to add information to your website.  However, they can pose some difficulties for users with disabilities.  For example, users who are blind will be unable to see the chart and instead rely on screen readers to provide them with textual information about the chart.  Users with mobility disabilities may be unable to use a mouse to hover over the graph, so they may need to be able to tab to each section of the graph.  There are a few things you can do to make your chart or graph more accessible to users with disabilities.

  • Add brief alternative text to the chart or graph.  We typically describe images using alternative text (ALT attribute), captions, or nearby bodies of text. Good alternative text provides the information conveyed in the image, including all relevant details.  For example, a graph showing sale increases might have alternative text that reads, "Graph of sales 2017-2019, see table below for data".  For more information about alternate text, visit the Images page.
  • Thoroughly describe the chart or graph in adjacent text.  In an adjacent paragraph or on a linked separate web page, describe the purpose and function of the chart or graph.  Include an analysis of the data presented.  For example, a graph showing sale increases may have a link to a longer description just beneath it.  The link can be as simple as "Division Sales 2017-2019 text description of the graph".  The description might read as follows: "This is a graph showing sale increases for the fiscal years of 2017 through 2019.  In 2018, sales in Division 1 increased by 12 percent from 2017, while sales in Division 2 increased by 15 percent.  From 2018 to 2019, Division 1 sales increased by 16 percent, and sales from Division 2 increased by 14 percent."
  • Supplement the chart or graph by providing the data in table format.  Tables are inherently more accessible than charts or graphs because users can tab or use the arrow keys to move through them.  You can provide the table alongside the chart or graph, link to it, or offer a downloadable version of the table.  The visualization plugin offers an option to select downloadable formats (Advanced>Frontend Actions>Actions, select Print, CSV or Excel).  A table of sale increases may look like this:
    Sales 2017 2018 2019
    Division 1 118 132 153
    Division 2 130 150 171

 

 


Last modified January 15, 2020