WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible flow charts or diagrams

for

From: Hoffman, Allen
Date: Sep 15, 2011 12:15PM


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