E-mail List Archives
Thread: Alt text or text equivalent for flowcharts, diagrams that have text in them
Number of posts in this thread: 6 (In chronological order)
From: Pope, Jennifer
Date: Wed, Nov 09 2016 1:08PM
Subject: Alt text or text equivalent for flowcharts, diagrams that have text in them
No previous message | Next message →
Hi,
Could you give me some guidance on how to provide alt text or an appropriate text equivalent for flowchart or diagram images that already contain text? Do you have any examples of ones done well I could take a look at? I've tried looking it up but just wondering what your experiences have been. These would be for images we're using in an online course. Thanks!
Jennifer Pope
Program Accessibility & QA Specialist
NU Online Experiential Learning
Northeastern University
360 Huntington Ave, 31 BV
Boston, MA 02115
617-373-6634
From: JP Jamous
Date: Wed, Nov 09 2016 1:22PM
Subject: Re: Alt text or text equivalent for flowcharts, diagrams that have text in them
← Previous message | Next message →
Jennifer,
That's a hard one. I would suggest adding a hidden paragraph that describes what is in the graph rather than using alt attribute. You can use sr-only class if you are using bootstrap to hide the text from sighted users.
With this approach, you can use UL or OL to provide steps in your descriptions.
We just covered something similar in the last quarter when we evaluated our site. We had a graph displaying rewards overview and another that is an info graph.
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Pope, Jennifer
Sent: Wednesday, November 9, 2016 2:08 PM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] Alt text or text equivalent for flowcharts, diagrams that have text in them
Hi,
Could you give me some guidance on how to provide alt text or an appropriate text equivalent for flowchart or diagram images that already contain text? Do you have any examples of ones done well I could take a look at? I've tried looking it up but just wondering what your experiences have been. These would be for images we're using in an online course. Thanks!
Jennifer Pope
Program Accessibility & QA Specialist
NU Online Experiential Learning
Northeastern University
360 Huntington Ave, 31 BV
Boston, MA 02115
617-373-6634
From: Beranek, Nicholas
Date: Wed, Nov 09 2016 1:30PM
Subject: Re: Alt text or text equivalent for flowcharts, diagrams that have text in them
← Previous message | Next message →
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
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Pope, Jennifer
Sent: Wednesday, November 09, 2016 3:08 PM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] Alt text or text equivalent for flowcharts, diagrams that have text in them
Hi,
Could you give me some guidance on how to provide alt text or an appropriate text equivalent for flowchart or diagram images that already contain text? Do you have any examples of ones done well I could take a look at? I've tried looking it up but just wondering what your experiences have been. These would be for images we're using in an online course. Thanks!
Jennifer Pope
Program Accessibility & QA Specialist
NU Online Experiential Learning
Northeastern University
360 Huntington Ave, 31 BV
Boston, MA 02115
617-373-6634
The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.
From: Lucy Greco
Date: Wed, Nov 09 2016 5:40PM
Subject: Re: Alt text or text equivalent for flowcharts, diagrams that have text in them
← Previous message | Next message →
check out a product called high charts they may be able to help with this
as well they have made some vary accessable svg files lucy
Lucia Greco
Web Accessibility Evangelist
IST - Architecture, Platforms, and Integration
University of California, Berkeley
(510) 289-6008 skype: lucia1-greco
http://webaccess.berkeley.edu
Follow me on twitter @accessaces
On Wed, Nov 9, 2016 at 12:30 PM, Beranek, Nicholas <
= EMAIL ADDRESS REMOVED = > 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
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Pope, Jennifer
> Sent: Wednesday, November 09, 2016 3:08 PM
> To: = EMAIL ADDRESS REMOVED =
> Subject: [WebAIM] Alt text or text equivalent for flowcharts, diagrams
> that have text in them
>
> Hi,
>
> Could you give me some guidance on how to provide alt text or an
> appropriate text equivalent for flowchart or diagram images that already
> contain text? Do you have any examples of ones done well I could take a
> look at? I've tried looking it up but just wondering what your experiences
> have been. These would be for images we're using in an online course.
> Thanks!
>
>
>
> Jennifer Pope
> Program Accessibility & QA Specialist
> NU Online Experiential Learning
> Northeastern University
> 360 Huntington Ave, 31 BV
> Boston, MA 02115
> 617-373-6634
>
> > > at http://webaim.org/discussion/archives
> > >
> The information contained in this e-mail is confidential and/or
> proprietary to Capital One and/or its affiliates and may only be used
> solely in performance of work or services for Capital One. The information
> transmitted herewith is intended only for use by the individual or entity
> to which it is addressed. If the reader of this message is not the intended
> recipient, you are hereby notified that any review, retransmission,
> dissemination, distribution, copying or other use of, or taking of any
> action in reliance upon this information is strictly prohibited. If you
> have received this communication in error, please contact the sender and
> delete the material from your computer.
> > > > >
From: Anne Godlewski
Date: Fri, Nov 11 2016 1:56PM
Subject: Re: Alt text or text equivalent for flowcharts, diagrams that have text in them
← Previous message | Next message →
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
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Pope, Jennifer
> Sent: Wednesday, November 09, 2016 3:08 PM
> To: = EMAIL ADDRESS REMOVED =
> Subject: [WebAIM] Alt text or text equivalent for flowcharts, diagrams that have text in them
>
> Hi,
>
> Could you give me some guidance on how to provide alt text or an appropriate text equivalent for flowchart or diagram images that already contain text? Do you have any examples of ones done well I could take a look at? I've tried looking it up but just wondering what your experiences have been. These would be for images we're using in an online course. Thanks!
>
>
>
> Jennifer Pope
> Program Accessibility & QA Specialist
> NU Online Experiential Learning
> Northeastern University
> 360 Huntington Ave, 31 BV
> Boston, MA 02115
> 617-373-6634
>
> > > > >
> The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.
> > > >
From: Chagnon | PubCom
Date: Fri, Nov 11 2016 7:46PM
Subject: Re: Alt text or text equivalent for flowcharts, diagrams that have text in them
← Previous message | No next message
Whenever you can avoid lengthy Alt-text and keep the critical information as live, tagged text, the better the experience for everyone using AT.
This is an ideal case for using Adobe InDesign for the layout and design, and then exporting a compliant PDF from the layout.
All of the boxes, arrows, lines, and other visual doodads can be set to artifact within InDesign. Then, the remaining live text can be sequenced into a good Reading Order through InDesign's Articles and Layers panels.
We have more tricks and methods for this type of diagram but they're too lengthy here to describe. I'll be teaching an all-day InDesign workshop at the Accessing Higher Ground conference this coming week, but I don't think I'll have the chance to cover that during the session.
--Bevi Chagnon
- - -
Bevi Chagnon | www.PubCom.com
Technologists, Consultants, Trainers, Designers, and Developers
for publishing & communication
| Acrobat PDF | Print | EPUBS | Sec. 508 Accessibility |
- - -
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Anne Godlewski
Sent: Friday, November 11, 2016 3:56 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Alt text or text equivalent for flowcharts, diagrams that have text in them
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
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Pope, Jennifer
> Sent: Wednesday, November 09, 2016 3:08 PM
> To: = EMAIL ADDRESS REMOVED =
> Subject: [WebAIM] Alt text or text equivalent for flowcharts, diagrams
> that have text in them
>
> Hi,
>
> Could you give me some guidance on how to provide alt text or an appropriate text equivalent for flowchart or diagram images that already contain text? Do you have any examples of ones done well I could take a look at? I've tried looking it up but just wondering what your experiences have been. These would be for images we're using in an online course. Thanks!
>
>
>
> Jennifer Pope
> Program Accessibility & QA Specialist
> NU Online Experiential Learning
> Northeastern University
> 360 Huntington Ave, 31 BV
> Boston, MA 02115
> 617-373-6634
>
> > > archives at http://webaim.org/discussion/archives
> > >
> The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.
> > > archives at http://webaim.org/discussion/archives
>