WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible flow charts or diagrams

for

From: Giovanni Duarte
Date: Sep 16, 2011 5:21AM


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


-----Original Message-----
From: <EMAIL REMOVED>
[mailto: <EMAIL REMOVED> ] On Behalf Of Hoffman, Allen
Sent: Thursday, September 15, 2011 1:16 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Accessible flow charts or diagrams

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.





-----Original Message-----
From: Duff Johnson [mailto: <EMAIL REMOVED> ]
Sent: Thursday, September 15, 2011 11:49 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Accessible flow charts or diagrams

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