How to Make Graphs, Charts, and Maps Accessible [Video]

Most web designers and developers are familiar with adding alternative text to an image so the meaning of an image can be understood when the image doesn’t display.

Adding alternative text is one of the basic principles of web accessibility. It provides a text alternative to non-text content on the web.

Alternative text is succinct and doesn’t repeat surrounding text in the main content or image caption.

But how do you make data in more complex graphics like maps, graphs, and charts accessible? The description of a complex graphic is too long to fit in the alternative text attribute.

This short (less than four minutes) video from the Access MOOC course explains the different options you have to make complex graphics more accessible.

While the intended audience is instructors creating content for students, the tips are useful for anyone creating complex graphics on the web.


Key Takeaways

  • Write a long text description of the image
  • Put data in a table, with semantic row and column headers
  • Include high contrast color combinations

What steps are you taking to make data in complex graphics more accessible?

Photo of author

About the Author

Deborah Edwards-Onoro helps small businesses, consultants, nonprofits, and higher ed with creative and distinctive websites. Deborah shares her expertise with web design, user experience, and accessibility on her blog, social media, and at meetup events. As organizer of Refresh Detroit, West Metro Detroit WordPress, and Metro Detroit WordPress, she encourages members to share their knowledge and experiences. In her free time, you'll find her birding, shooting photos, reading, or watching tennis.

5 thoughts on “How to Make Graphs, Charts, and Maps Accessible [Video]”

Comments are closed.

%d bloggers like this: