Charts & Graphs

Using charts or graphs can help visualize data, but what if you could not interpret the data based on how it was presented?  To take it a step further, what if you were expected to extrapolate data from the chart or graph to complete an assignment or task but could not do so?  Many face this frustration, but this can be avoided by considering the following when developing your charts and graphs.  Designing your charts and graphs with these in mind helps everyone, not just those with disabilities.

Color

• Verify your chart or graph elements and text have sufficient color contrast (4.5:1 ratio or more)

  • Contrast 

• Do not use color alone to convey meaning; add a secondary indicator

  • Line graphs: shape differences

  • Charts: pattern differences

• Add white space between elements to help define objects

Labels and Descriptions

• Identify major elements

  • The chart or graph title

  • The vertical and horizontal axis

  • Legends should be clearly marked

  • Labels

    • Direct labels: position label directly beside or adjacent to the data point

    • Callout labels: data points have a callout with the amount (e.g., percentage, total number, etc.) so users do not have to speculate

• Add alt text that provides context and explains the most important details about the visualization (see Supplemental Formats below if the chart or graph is complex)

Supplemental Formats

Presenting data in multiple formats helps all learners. Adjacent text or data tables should be considered to provide supplemental formats to present the data.

Specifically, two-part alternative text is required for more complex charts or graphs where alternative text is not sufficient to convey the context and important details. First, a short description to identify the image (and, when appropriate, the location of the long description) should be provided as the alternative text. Secondly, a long description to convey the essential information from the chart or graph should be added to the adjacent text or an external link to the long description should be provided. 

Resources

• Accessible Data Visualizations (University of Wisconsin-Madison)

• Add a Chart to your document in Word (Microsoft Support)

• Add Alt Text to Charts (Microsoft Support)

• Add Alt Text to Charts in Google (Elgin Community College)

• Add alternative text to a shape, picture, chart, SmartArt graphic, or other object (Microsoft Support)

• Add and Edit a Chart of Graph (Google Docs Editors Help)

• Add or Remove Data Labels in a Chart (Microsoft Support)

• Add or Remove Titles and Data Labels (Microsoft Support)

• Change the Format of Chart Elements Manually (Microsoft Support)

• Charts & Accessibility (Penn State)

• Complex Images (W3C)

• Create and Edit Charts (Google Docs Editors Support)

• Data Visualizations, Charts, and Graphs (Harvard University)

• Link a chart, table, or slides to Google Docs or Slides (Google Docs Editors Help)

• Make Data and Graphs Accessible for Everyone (Boise State)

• Present Data in a Chart (Microsoft Support)