WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Accessible flow charts or diagrams

for

Number of posts in this thread: 12 (In chronological order)

From: Giovanni Duarte
Date: Wed, Sep 14 2011 6:00PM
Subject: Accessible flow charts or diagrams
No previous message | Next message →

Hi,

I know I could provide an alternative text description to a flow chart but I
would prefer to develop flow charts or diagrams that are already accessible.
For example, to put math equations on the web, I could take a screenshot and
then describe it, but it is better to use MathML. Have any of you
implemented this? We develop many of these charts, flowcharts, or diagrams
and I would like to find something that can make then accessible. I
understand Microsoft Visio is somewhat accessible (or I could be wrong) but
I need a web based solution.

I know the example I am providing below is not accessible and I apologize
for it.



http://www.logiccoder.com/Images/ClubMembers02.jpg



Thanks,

Giovanni

From: Jennifer Sutton
Date: Wed, Sep 14 2011 7:54PM
Subject: Re: Accessible flow charts or diagrams
← Previous message | Next message →

Hello:

Maybe this document from IBM will prove helpful:

http://www-03.ibm.com/able/news/accessibleanalyticsfull.html

Jennifer

At 05:03 PM 9/14/2011, you wrote:
>Hi,
>
>I know I could provide an alternative text description to a flow chart but I
>would prefer to develop flow charts or diagrams that are already accessible.
>For example, to put math equations on the web, I could take a screenshot and
>then describe it, but it is better to use MathML. Have any of you
>implemented this? We develop many of these charts, flowcharts, or diagrams
>and I would like to find something that can make then accessible. I
>understand Microsoft Visio is somewhat accessible (or I could be wrong) but
>I need a web based solution.
>
>I know the example I am providing below is not accessible and I apologize
>for it.
>
>
>
>http://www.logiccoder.com/Images/ClubMembers02.jpg
>
>
>
>Thanks,
>
>Giovanni
>
>
>
>
>
>

From: Ryan E. Benson
Date: Wed, Sep 14 2011 9:45PM
Subject: Re: Accessible flow charts or diagrams
← Previous message | Next message →

Giovanni,

Nothing that I have seen makes fully accessible. I had to do this for
a project I was working on last week. The guidance i found was to
label each node as step 1, etc. then if you hit a decision node, such
as your end of first file, you decide one path and follow it to
completion, then the other. However after your decision node you say
if yes go to step xx, if no go to step yy. Your chart is kind of
tricky so you will have to be careful. For the alt attribute, I would
say something like "flow chart of how to calculate members dues". Then
since you can't rely on longdesc either a: put my description in plain
text under the image, or b: a link to a page with my desc. Of course
you can get fancy and hide it with CSS so only screen readers would
read it.

--
Ryan E. Benson



On Wed, Sep 14, 2011 at 8:03 PM, Giovanni Duarte < = EMAIL ADDRESS REMOVED = > wrote:
> Hi,
>
> I know I could provide an alternative text description to a flow chart but I
> would prefer to develop flow charts or diagrams that are already accessible.
> For example, to put math equations on the web, I could take a screenshot and
> then describe it, but it is better to use MathML. Have any of you
> implemented this? We develop many of these charts, flowcharts, or diagrams
> and I would like to find something that can make then accessible. I
> understand Microsoft Visio is somewhat accessible (or I could be wrong) but
> I need a web based solution.
>
> I know the example I am providing below is not accessible and I apologize
> for it.
>
>
>
> http://www.logiccoder.com/Images/ClubMembers02.jpg
>
>
>
> Thanks,
>
> Giovanni
>
>
>
>
>
>

From: Duff Johnson
Date: Thu, Sep 15 2011 9:48AM
Subject: Re: Accessible flow charts or diagrams
← Previous message | Next message →

All,

I'd like to offer a couple of thoughts on this question.

1) Organization and flow charts are often developed in authoring applications that do not output HTML/CSS/JavaScript, or that do so poorly.

2) As previously noted, in such cases, HTML-based implementations are limited to an image + alt. text, which is unsatisfactory for a WIDE variety of reasons, not the least of which is that alt. text is internally undifferentiated and is therefore un-navigable.

One approach to this problem is to use (gasp!) PDF. Why?

a) PDF can accommodate ANY chart, no matter the authoring software or content complexity, simply by virtue of printing the thing.

b) PDF tags may be deployed to arbitrary levels of complexity irrespective of the content. It's possible, for example, to place an H4 tag on each Job Title and follow it with a Paragraph tag for the job-holder. One could also choose to use heading levels to describe different levels in the organization, or combine headings and lists and table structures... or whatever.

Essentially, PDF frees the document author to leverage the content-structuring facility of PDF tags on the "canvass" of an org chart (or other complex graphics) to produce (almost) any desired result from an AT point of view.

There are other advantages...

a) No need to reconcile HTML tagging (structural issues) with layout issues via exotic css / JavaScript / whatever.

b) Printed and web-based charts are identical, with no compromise in the (print) design.

Now... many would rather hurl than consider PDF as "web content". Nonetheless, this use-case has always struck me as an exception that even a HTML/CSS/JavaScript evangelist could accept. I'm curious to know if the above approach seems generically reasonable for charts and diagrams, or if you think I'm simply trying to bang a square peg into a round hole...

Duff Johnson

US Committee for ISO/DIS 14289 (PDF/UA), Chair

p +1.617.283.4226
e = EMAIL ADDRESS REMOVED =
t http://www.twitter.com/duffjohnson
w http://www.duff-johnson.com



On Sep 14, 2011, at 11:44 PM, Ryan E. Benson wrote:

> Giovanni,
>
> Nothing that I have seen makes fully accessible. I had to do this for
> a project I was working on last week. The guidance i found was to
> label each node as step 1, etc. then if you hit a decision node, such
> as your end of first file, you decide one path and follow it to
> completion, then the other. However after your decision node you say
> if yes go to step xx, if no go to step yy. Your chart is kind of
> tricky so you will have to be careful. For the alt attribute, I would
> say something like "flow chart of how to calculate members dues". Then
> since you can't rely on longdesc either a: put my description in plain
> text under the image, or b: a link to a page with my desc. Of course
> you can get fancy and hide it with CSS so only screen readers would
> read it.
>
> --
> Ryan E. Benson
>
>
>
> On Wed, Sep 14, 2011 at 8:03 PM, Giovanni Duarte < = EMAIL ADDRESS REMOVED = > wrote:
>> Hi,
>>
>> I know I could provide an alternative text description to a flow chart but I
>> would prefer to develop flow charts or diagrams that are already accessible.
>> For example, to put math equations on the web, I could take a screenshot and
>> then describe it, but it is better to use MathML. Have any of you
>> implemented this? We develop many of these charts, flowcharts, or diagrams
>> and I would like to find something that can make then accessible. I
>> understand Microsoft Visio is somewhat accessible (or I could be wrong) but
>> I need a web based solution.
>>
>> I know the example I am providing below is not accessible and I apologize
>> for it.
>>
>>
>>
>> http://www.logiccoder.com/Images/ClubMembers02.jpg
>>
>>
>>
>> Thanks,
>>
>> Giovanni
>>
>>
>>
>>
>>
>>

From: Hoffman, Allen
Date: Thu, Sep 15 2011 12:15PM
Subject: Re: Accessible flow charts or diagrams
← Previous message | Next message →

I think you make valid points here.
Conceptually for me as a screen reader user, I would like to be able to
follow flow charts in an arrow fashion with each step having associated
attributes. Kind of like navigating a table structure, but each cell
contains content and attributes--such as condition and branch point
options. I believe some kind of Excel spreadsheet could be created with
this concept in mind, but PDF does lend itself to much of this thinking
and would definitely lower the coding level for keeping visual
appearance separated from the tagging portions. I have not seen
successful examples of either of these methods to date, but feel either
method may work for some situations if sufficient planning were done
upfront. for org charts, a dropdown box with levels would also work.





From: Duff Johnson
Date: Thu, Sep 15 2011 1:51PM
Subject: Re: Accessible flow charts or diagrams
← Previous message | Next message →

Thanks, Allen.

One clarification I should offer. As Karen McCall (my own personal fact-checker) pointed out to me offlist, many applications will output a single image to PDF for the entire chart instead of doing the job right with discrete text and graphics.

In such cases, PDF is no improvement over image + alt. text because there's only one object to tag.

Thanks for stating the conceptual objective in your preferred terms - I will mull on this for PDF 2.0.

Duff.

On Sep 15, 2011, at 2:16 PM, Hoffman, Allen wrote:

> I think you make valid points here.
> Conceptually for me as a screen reader user, I would like to be able to
> follow flow charts in an arrow fashion with each step having associated
> attributes. Kind of like navigating a table structure, but each cell
> contains content and attributes--such as condition and branch point
> options. I believe some kind of Excel spreadsheet could be created with
> this concept in mind, but PDF does lend itself to much of this thinking
> and would definitely lower the coding level for keeping visual
> appearance separated from the tagging portions. I have not seen
> successful examples of either of these methods to date, but feel either
> method may work for some situations if sufficient planning were done
> upfront. for org charts, a dropdown box with levels would also work.
>
>
>
>
>
>

From: Giovanni Duarte
Date: Fri, Sep 16 2011 5:09AM
Subject: Re: Accessible flow charts or diagrams
← Previous message | Next message →

Thanks Ryan.
I need to find a more scalable process since we have many instructional
designers developing multiple charts.
Giovanni

From: Giovanni Duarte
Date: Fri, Sep 16 2011 5:15AM
Subject: Re: Accessible flow charts or diagrams
← Previous message | Next message →

Jennifer,
Thanks for the link. It doesn't answer directly my question but it provides
excellent information for the development phase.

Giovanni

From: Giovanni Duarte
Date: Fri, Sep 16 2011 5:21AM
Subject: Re: Accessible flow charts or diagrams
← Previous message | Next message →

Thanks Duff for the idea. It seems like there is no a good automated or
efficient way to do this. My problem is that I have many instructional
designers developing these charts from different Subject Matter Experts.
What Allen described below is exactly what I would like to do for the screen
reader user. I will review with more detail Duff's idea - very interesting.

Thanks,
Giovanni


From: Steve Faulkner
Date: Fri, Sep 16 2011 8:00AM
Subject: Re: Accessible flow charts or diagrams
← Previous message | Next message →

Hi Giovani,

There is a free Windows application available that blind friends have
recommended, it may be of interest

deep view
http://cs.unc.edu/~dorianm/academics/deepview/index.html

--
with regards

Steve Faulkner
Technical Director - TPG

www.paciellogroup.com |
www.HTML5accessibility.com<;http://www.html5accessibility.com/>;|
www.twitter.com/stevefaulkner
HTML5: Techniques for providing useful text alternatives -
dev.w3.org/html5/alt-techniques/
Web Accessibility Toolbar - www.paciellogroup.com/resources/wat-ie-about.html



On 15 September 2011 01:03, Giovanni Duarte < = EMAIL ADDRESS REMOVED = > wrote:

> Hi,
>
> I know I could provide an alternative text description to a flow chart but
> I
> would prefer to develop flow charts or diagrams that are already
> accessible.
> For example, to put math equations on the web, I could take a screenshot
> and
> then describe it, but it is better to use MathML. Have any of you
> implemented this? We develop many of these charts, flowcharts, or diagrams
> and I would like to find something that can make then accessible. I
> understand Microsoft Visio is somewhat accessible (or I could be wrong) but
> I need a web based solution.
>
> I know the example I am providing below is not accessible and I apologize
> for it.
>
>
>
> http://www.logiccoder.com/Images/ClubMembers02.jpg
>
>
>
> Thanks,
>
> Giovanni
>
>
>
>
>
>

From: Hoffman, Allen
Date: Fri, Sep 16 2011 8:39AM
Subject: Re: Accessible flow charts or diagrams
← Previous message | Next message →

This should be a visio layer or functionality if you ask me.

Flow charts are a set of visual components, each with relationship
attributes. Such information should be encodable such that the name,
and attributes including navigation attributes are exposed to assistive
technologies.
Org charts are basically just hierarchical lists, so should be
presentable as such--but visual design sometimes gets in the way of
quick transcription. When visual design leads to unclear hierarchical
topology, the actual org chart is probably not effective in the first
place and should be reconsidered by the author--it is a basic function
of an org chart to impart such hierarchical relationships, and if it
doesn't do so, ...?

Just some food for thought.




From: John E Brandt
Date: Fri, Sep 16 2011 9:00AM
Subject: Re: Accessible flow charts or diagrams
← Previous message | No next message

Nice application. However, I have some questions.

Am I correct in assuming this only works with the products "Rational Rose"
and "Visio?"

Can we also assume that most flow charts are not developed with these
products? They are probably simply drawn in a program like Illustrator or
MS-Publisher, or created from Excel.

BTW, I had never heard of Rational Rose. But somewhere in my closet, I have
an original (free) copy of Visio for Windows 3.1!

~j

John E. Brandt
www.jebswebs.com
= EMAIL ADDRESS REMOVED =
207-622-7937
Augusta, Maine, USA