DEV Community

Tim Downey
Tim Downey

Posted on

What is an effective way to annotate/caption images of graphs for screen readers?

Hello folks,

I've been refining some of my class notes into blog posts like the following:

I rely heavily on images of graphs that I draw on an iPad and I try my best to provide decent alt text descriptions, but I realize that there's no way I can actually describe exactly what's in the graph short of pasting in a full adjacency list. Take this one for example:

Two correct minimum spanning trees for a graph

That image is truly worth a thousand words and I can't think of how I could annotate it better using the tools available. I could be very verbose in my description of the correct minimum spanning trees in the picture, but I feel like the understandability of the post as a whole would suffer. I could only see that working if it were in some type of "for assistive technology only" element, but I'm pretty sure an alt tag isn't it..

Does anyone have advice or tips for making this kind of content more accessible?

Thanks!

Top comments (2)

Collapse
 
alhasenzahl profile image
Amanda Hasenzahl

Try checking out this link on complex images...it should point you in the right direction w3.org/WAI/tutorials/images/complex/

Collapse
 
downey profile image
Tim Downey

Just saw this comment now. Thank you!