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: Anne Godlewski
Date: Nov 11, 2016 1:56PM

Is there a suitable solution for PDFs in such situations? I have a page-long infographic of a decision tree, and it's all text boxes and images for lines and arrows.

Anne

On Nov 9, 2016, at 3:30 PM, Beranek, Nicholas wrote:

> 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
>
>