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?
I may be doing something wrong, but this page itself has accessibility problems, with JAWS 17 and IE 11 I can’t figure out how to start the video!
I do not see a way to access the video with a screen reader.
My fault, David. I updated the code for the video, give it another try now.
My apologies, Lolly. My fault. I fixed the code, give it another try now.
Lolly, were you able to access the video with a screen reader, after I made the changes?