WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: How to make accessible flowcharts?

for

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

From: Itzel McClaren (US - IFS)
Date: Tue, Feb 05 2019 12:19PM
Subject: How to make accessible flowcharts?
No previous message | Next message →

Hello, we have a flowchart in PDF and we are having a hard time figuring
out what's the most efficient and effective way to make the flowchart
accessible. Any suggestions?

--
*Itzel McClaren*
PwC | Manager
Austin | +1 (512) 450 4012
PricewaterhouseCoopers LLP
pwc.com <https://www.pwc.com>

The information transmitted, including any attachments, is intended only for the person or entity to which it is addressed and may contain confidential and/or privileged material. Any review, retransmission, dissemination or other use of, or taking of any action in reliance upon, this information by persons or entities other than the intended recipient is prohibited, and all liability arising therefrom is disclaimed. If you received this in error, please contact the sender and delete the material from any computer. PricewaterhouseCoopers LLP is a Delaware limited liability partnership. This communication may come from PricewaterhouseCoopers LLP or one of its subsidiaries.

From: Philip Kiff
Date: Tue, Feb 05 2019 1:08PM
Subject: Re: How to make accessible flowcharts?
← Previous message | Next message →

I'd be curious to find good solutions for flow charts in PDFs, too.

With some straightforward flowcharts it is possible to use nested lists,
with the list more or less representing the order of the steps
represented by the flow chart. And you can then use alternative text on
shapes and connectors to link things together appropriately in a way
that is at least somewhat readable by assistive technologies.

But there are other flowcharts for which there are simply too many
possible points where the flow must go back on itself or are supposed to
follow multiple different potential paths that lead to different levels
in the hierarchy. In  those cases, I've sometimes inserted long
descriptions in alternative text. But I think that is probably
inadequate for achieving real accessibility. In such cases, you should
be able to substitute a detailed text description of the workflow
directly in the visible text alongside the chart. But when remediating
someone else's document, I've not always been in a position to demand
the insertion of such text, especially when such a description does not
already exist in writing somewhere.

Phil.

On 2019-02-05 2:19 PM, Itzel McClaren (US - IFS) wrote:
> Hello, we have a flowchart in PDF and we are having a hard time figuring
> out what's the most efficient and effective way to make the flowchart
> accessible. Any suggestions?
>

From: mhysnm1964
Date: Wed, Feb 06 2019 12:28AM
Subject: Re: How to make accessible flowcharts?
← Previous message | Next message →

I do not think there is any simple method to achieve this. I don't think SVG would even provide the required level of understanding. Described diagrams by someone who does this as a profession in my mind is the only method. As flow charts are very visual in nature and they can get very complex very quickly. Even tactual diagrams for complex flowcharts require simplification. Happy to be proven wrong.


From: Detlev Fischer
Date: Wed, Feb 06 2019 7:46AM
Subject: Re: How to make accessible flowcharts?
← Previous message | Next message →

In principle, semantically you can map a flowchart and its links /
choices to a set of pages with cross links. You may also map the logic
to text elements on one page with in-page links to other elements on the
same page, which would need good focus. This may not work well across
devices and user agents, though - I remember reading that in-page links
were not well supported or buggy in some mobile browsers. I have
recently tested a web application where a visual flow chart was also
available in an alternative list/grid view of steps with in-page cross
linking. That worked, sort-of, though I would be cautious claiming full
equivalence of such a solution as there is definitely less context
available compared to viewing the full flowchart diagram.

Best,
Detlev

Am 05.02.2019 um 20:19 schrieb Itzel McClaren (US - IFS):
> Hello, we have a flowchart in PDF and we are having a hard time figuring
> out what's the most efficient and effective way to make the flowchart
> accessible. Any suggestions?
>
--
Detlev Fischer
Testkreis
Werderstr. 34, 20144 Hamburg

Mobil +49 (0)157 57 57 57 45

http://www.testkreis.de
Beratung, Tests und Schulungen für barrierefreie Websites

From: David Ashleydale
Date: Wed, Feb 06 2019 9:14AM
Subject: Re: How to make accessible flowcharts?
← Previous message | Next message →

I wonder if there's a way to create an alternative format that reads sort
of like a Choose Your Own Adventure:

Something like:

1: Do you like candy? If yes, go to 2. If no, go to 3.

2: Do you like crunchy or chewy? For crunchy, go to 6. For chewy, go to 7.

3: Have some fruit. If you are still hungry, go back to 1. If not, exit.

David

On Wed, Feb 6, 2019 at 6:45 AM Detlev Fischer < = EMAIL ADDRESS REMOVED = >
wrote:

> In principle, semantically you can map a flowchart and its links /
> choices to a set of pages with cross links. You may also map the logic
> to text elements on one page with in-page links to other elements on the
> same page, which would need good focus. This may not work well across
> devices and user agents, though - I remember reading that in-page links
> were not well supported or buggy in some mobile browsers. I have
> recently tested a web application where a visual flow chart was also
> available in an alternative list/grid view of steps with in-page cross
> linking. That worked, sort-of, though I would be cautious claiming full
> equivalence of such a solution as there is definitely less context
> available compared to viewing the full flowchart diagram.
>
> Best,
> Detlev
>
> Am 05.02.2019 um 20:19 schrieb Itzel McClaren (US - IFS):
> > Hello, we have a flowchart in PDF and we are having a hard time figuring
> > out what's the most efficient and effective way to make the flowchart
> > accessible. Any suggestions?
> >
> --
> Detlev Fischer
> Testkreis
> Werderstr. 34, 20144 Hamburg
>
> Mobil +49 (0)157 57 57 57 45
>
> http://www.testkreis.de
> Beratung, Tests und Schulungen für barrierefreie Websites
>
> > > > >

From: David Wisniewski
Date: Wed, Feb 06 2019 11:12AM
Subject: Re: How to make accessible flowcharts?
← Previous message | Next message →

I love this way of thinking (and it brings me back to some of the books I read as a child). Thanks David! I'm going to have to try this when the need arises.

Best wishes,
David Wisniewski
Information Design Accessibility Specialist
Brandeis University IT Services

> On Feb 6, 2019, at 11:14 AM, David Ashleydale < = EMAIL ADDRESS REMOVED = > wrote:
>
> I wonder if there's a way to create an alternative format that reads sort
> of like a Choose Your Own Adventure

From: Jiatyan Chen
Date: Wed, Feb 06 2019 3:19PM
Subject: Re: How to make accessible flowcharts?
← Previous message | Next message →

Example at http://diagramcenter.org/specific-guidelines-d.html#44

From: mhysnm1964
Date: Wed, Feb 06 2019 5:25PM
Subject: Re: How to make accessible flowcharts?
← Previous message | Next message →

David,

That is really outside of the box. This reminds me of a discussion I had with a co-worker. On the iPad or iPhone, we did discuss the ability of using the touch screen of a means of working out a flow chart. In our case it was a network diagram of routers and switches. Never got to the stage of finding someone who could code a prototype to see if it was even possible. The high overview on how we thought it could work:

1. Diagram is shown.
2. left and right swipe would take them to a switch or router.
3. Description would inform them of the next hop devices.
If a device was to the left, then they would perform a right to left swipe.
If the device was to the right, they would perform a left to right swipe.
If it was above. A bottom to up swipe.
And so on.
We even tossed around the ability of using the finger to be dragged around the screen providing textual description and sounds to inform if they are following a connection or on a device.



From: Isabel Holdsworth
Date: Thu, Feb 07 2019 4:51AM
Subject: Re: How to make accessible flowcharts?
← Previous message | Next message →

This is great. But what if there were more than one connection leading
out from the same direction? Would be fun to try creating a prototype
as an HTML application to start with.

On 07/02/2019, = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS REMOVED = > wrote:
> David,
>
> That is really outside of the box. This reminds me of a discussion I had
> with a co-worker. On the iPad or iPhone, we did discuss the ability of using
> the touch screen of a means of working out a flow chart. In our case it was
> a network diagram of routers and switches. Never got to the stage of finding
> someone who could code a prototype to see if it was even possible. The high
> overview on how we thought it could work:
>
> 1. Diagram is shown.
> 2. left and right swipe would take them to a switch or router.
> 3. Description would inform them of the next hop devices.
> If a device was to the left, then they would perform a right to left swipe.
> If the device was to the right, they would perform a left to right swipe.
> If it was above. A bottom to up swipe.
> And so on.
> We even tossed around the ability of using the finger to be dragged around
> the screen providing textual description and sounds to inform if they are
> following a connection or on a device.
>
>
>
>

From: mhysnm1964
Date: Thu, Feb 07 2019 5:55PM
Subject: Re: How to make accessible flowcharts?
← Previous message | Next message →

Agreed, also are we talking about layer 2 or layer 3. Oops, layer 2 is the physical and layer 3 is the routing (logical) level. Other ideas we had if that occurred, was to have a pop-up menu. Then they could select the branch they wanted to follow. The layer 2 (l2) or layer 3 (l3), would have to be independent diagrams. AS it would get to complex. I have seen this done in tables which does make a lot of sense.

The CCIE diagrams I was looking at are so complex that I don't know if my idea would work. For CCNA and CCNP level this could. I am using the Cisco Certification courses as examples here. This could also apply to any similar networking courses.



From: Walters, April Contractor
Date: Fri, Feb 08 2019 8:00AM
Subject: Re: How to make accessible flowcharts?
← Previous message | Next message →

It seems like TWINE may work - http://twinery.org/
http://twinery.org/wiki/twine2:what_can_you_build_with_twine

http://twinery.org/wiki/twine2:the_story_map
So it appears you can basically take the diagram/flow-chart, and turn the relationships into "pages" when there's a juncture ("Did the test work?" Y goes to the "continue" path, N goes to the "troubleshoot" path)

http://twinery.org/wiki/twine2:how_to_review_your_story to see all the text parts together

This may be overkill, but I do like the fact this tool exists. :)


From: Philip Kiff
Date: Fri, Feb 08 2019 9:18AM
Subject: Re: How to make accessible flowcharts?
← Previous message | Next message →

I've found all these ideas for alternative formatting of flowcharts and
links to suggestions for text rewriting to be very interesting and
thought-provoking. Thanks!

Circling back to Itzel McClaren's original question of what to do with a
flowchart in a pre-existing PDF, though, I would note that most of these
options are not available. Within a pre-existing PDF that you are trying
to remediate, you are more or less limited to two options:

1. Tag the entire flowchart as one large figure and then add a single
extended description as alternative text.

2. Tag each individual text and graphic object within the flowchart and
then laboriously try to re-order all the elements into a nested list
structure, applying explanatory alternative text onto each specific
shape or connector as you go.

The problem I find with using extended alternative text passages in
option 1 is that you can't add semantic structure to alternative text in
a PDF (it's the same in HTML). So even if you come up with a method of
re-writing the flowchart into a coherent nested list structure, your
alternative text will read as a single stream of text without any list
items or nesting. You can improve things somewhat by creating a
numbering scheme and explaining how that works at the beginning of your
long alternative text stream. But unless you can actually insert the
structured text into the main body of the PDF text where it can be
tagged with regular text structures, then it loses some of its ability
to serve as truly accessible "alternative" text for a flowchart.

I have a few times inserted "invisible" text into PDFs in order to
insert structured semantic text into a pre-existing PDF and make that
text available only to screen readers. By "invisible" I just mean that I
insert the text in the same colour as the background colour of the page,
so it does not appear on screen or in print. But I see that also as an
inadequate method of dealing with complex figures because not all users
who benefit from such explanatory text will be screen reader users.

The best method I've found (aside from editing the source PDF content
and starting over) is option 2, which I think is still not really
adequate except in the case of flowcharts whose object containers in the
PDF can be shoe-horned into a nested list structure.

Phil.

Philip Kiff
D4K Communications

On 2019-02-05 2:19 PM, Itzel McClaren (US - IFS) wrote:
> Hello, we have a flowchart in PDF and we are having a hard time figuring
> out what's the most efficient and effective way to make the flowchart
> accessible. Any suggestions?

From: Isabel Holdsworth
Date: Tue, Feb 19 2019 2:38AM
Subject: Re: How to make accessible flowcharts?
← Previous message | No next message

Please everyone avoid adding long and complex strings of alternative
text to images like the plague. Depending on the screenreader being
used, it's not always possible to read the alternative text in a
granular fashion, so it must be read in a single hit. Also, as
mentioned before, many users who could benefit from having complex
images explained won't be screenreader users, but won't have access to
your description.
Cheers, Isabel

On 08/02/2019, Philip Kiff < = EMAIL ADDRESS REMOVED = > wrote:
> I've found all these ideas for alternative formatting of flowcharts and
> links to suggestions for text rewriting to be very interesting and
> thought-provoking. Thanks!
>
> Circling back to Itzel McClaren's original question of what to do with a
> flowchart in a pre-existing PDF, though, I would note that most of these
> options are not available. Within a pre-existing PDF that you are trying
> to remediate, you are more or less limited to two options:
>
> 1. Tag the entire flowchart as one large figure and then add a single
> extended description as alternative text.
>
> 2. Tag each individual text and graphic object within the flowchart and
> then laboriously try to re-order all the elements into a nested list
> structure, applying explanatory alternative text onto each specific
> shape or connector as you go.
>
> The problem I find with using extended alternative text passages in
> option 1 is that you can't add semantic structure to alternative text in
> a PDF (it's the same in HTML). So even if you come up with a method of
> re-writing the flowchart into a coherent nested list structure, your
> alternative text will read as a single stream of text without any list
> items or nesting. You can improve things somewhat by creating a
> numbering scheme and explaining how that works at the beginning of your
> long alternative text stream. But unless you can actually insert the
> structured text into the main body of the PDF text where it can be
> tagged with regular text structures, then it loses some of its ability
> to serve as truly accessible "alternative" text for a flowchart.
>
> I have a few times inserted "invisible" text into PDFs in order to
> insert structured semantic text into a pre-existing PDF and make that
> text available only to screen readers. By "invisible" I just mean that I
> insert the text in the same colour as the background colour of the page,
> so it does not appear on screen or in print. But I see that also as an
> inadequate method of dealing with complex figures because not all users
> who benefit from such explanatory text will be screen reader users.
>
> The best method I've found (aside from editing the source PDF content
> and starting over) is option 2, which I think is still not really
> adequate except in the case of flowcharts whose object containers in the
> PDF can be shoe-horned into a nested list structure.
>
> Phil.
>
> Philip Kiff
> D4K Communications
>
> On 2019-02-05 2:19 PM, Itzel McClaren (US - IFS) wrote:
>> Hello, we have a flowchart in PDF and we are having a hard time figuring
>> out what's the most efficient and effective way to make the flowchart
>> accessible. Any suggestions?
> > > > >