Skip to Main Content

Accessibility

An overview of best accessibility practices.

Creating Accessible Charts, Graphs, Tables, and Infographics

Charts, graphs, tables, and infographics provide helpful visual information to learners. However, charts, graphs, tables, and infographics without the necessary accessibility information, frequently cannot be read by a screen reader. Because they involve so many different design elements, you typically will need to combine 3 or more basic accessibility practices, to ensure that these complex images are accessible. 

Accessible Charts and Graphs

Charts and Graphs

Charts and graphs can be vibrant ways to relay information visually. However, not all learners find charts and graphs ideal for absorbing information and screen readers will "read" them as images rather than text, unless additional steps are taken.

To create accessible charts and graphs, follow the steps below.

  1. Describe the chart or graph by composing both a text summary (or description) and data table coding. 
  2. If the chart or graph uses color, make sure that color alone is not the sole communicator of the information. You can do this by labeling bars and lines to ensure that there's text to signify in addition to color. Also, check and modify the bar and line colors to make sure they're high contrast. 
  3. If there's numeric information in the chart or graph, add an accessible data table to serve as an alternate format. 

For steps and examples on how to create accessible charts, please see:

Accessible Tables

Tables

Tables can neatly organize information. However, not all learners find table organization easy to scan and learners using screen readers may not be able to navigate tables unless specific HTML steps are taken. Whether you're creating tables in Word, Excel, or a LMS environment, there are at least 3 components you'll need to add to ensure that simple tables are accessible. Please note that complex tables require additional steps.

  1. Provide a descriptive caption to contextualize your table and the information it conveys to learners.
  2. Identify row and column headers as table headers.
  3. Identify the scope of each header using the scope attribute.
  4. Avoid splitting or merging cells and make sure to label blank cells as "blank."

For more information on creating accessible tables, please see:

Accessible Infographics

Infographics

Infographics may be used to quickly convey complex bits of information and show key relationships between data sets. For sighted users, representing data as an infographic can improve accessibility. However, this visual format can be challenging for those with visual impairments, and also for individuals with cognitive disabilities that make it difficult to follow complex designs or find design elements distracting. Infographic designers should design accessibility into an infographic to ensure the content is readable by assistive technologies, such as screen readers.

This infographic from WebAIM highlights many important principles of accessible design, while being itself an accessible infographic!

Web Accessibility for Designers infographic with link to text version at WebAIM.org