WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible flow charts or diagrams

for

From: Duff Johnson
Date: Sep 15, 2011 9:48AM

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