WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Alt text or text equivalent for flowcharts, diagrams that have text in them

for

From: Beranek, Nicholas
Date: Nov 9, 2016 1:30PM

Hi Jennifer,

We came across this problem recently. The solution we came up with is similar to what JP described: hide the image and contents of the flow chart and provide an offscreen alternative.

Here's the page in question:

https://www.capitalone.com/credit-cards/blog/annual-fee-worth-it/

You'll notice that the flow chart itself is set to aria-hidden=true. The sibling of that <div> is another <div> positioned offscreen. It contains two <h3> and several <p> elements that explain what it is being conveyed visually in the graphics.

I hope this helps!

Nick Beranek
Capital One