ACCESSIBLE DIAGRAMS: The Talking Flow Chart

A diagram that depicts a procedure or process is called a flowchart.

Another definition of a flowchart is a diagrammatic representation of an algorithm or a step-by-step process for addressing a problem.

Accessible Talking Flow Chart

How do you make this type of schematic accessible to the largest number of website visitors?

SOLUTION: Provide the information in different formats in addition to displaying the flow chart image:

1) Text Transcript – This text can be accessed by screen readers that describes the step-by-step process depicted in the flow chart graphic.

2) “Talking” Flow Chart – An audio file that can be played using an accessible audio player embedded on the website page. This means that people with low vision or who only use a keyboard to navigate a web page don’t have to use a screen reader to get to the information.

3) Audio in Different Languages – Offer the same “talking” flow chart information in different languages for customers and prospects in other countries.

To see these three solutions in action, visit the Talking Flow Chart page of Accessible Talking Charts.

===

Instant Download!

PDF Accessibility Remediation How to Fix 40 Common Errors

Whether you have limited experience with the PDF remediation process, are expanding your knowledge on how to remediate PDFs, or simply need a resource that can help remind you how to fix a frustrating error, the info provided in this e-book can help.

Download now.

===

ACCESSIBLE IMAGES: Use a Nested List to Describe a Simple Flow Chart

Flow Chart illustration

When it comes to accessibility, flow chart images can be difficult to describe.

SOLUTION: Convert the simple flow chart info to a nested list so the content is available to assistive technology.

The “boxes” are presented as the initial list numbers and the possible transitions are coded as nested sub-bullets within the list.

I coded this simple flow chart:

Flow chart example

as a nested list:

Flow Chart Nested List Code - Download it from the link below
Click here for accessible description of this basic flow chart

BEST PRACTICE: Create the nested link description as an HTML file and publish the link underneath the flow chart image on your website page so it can be accessed by screen reader users.

FOR YOU – DOWNLOAD THIS NESTED LIST CODE NOW: Download this code set (HTML5 and CSS files) via a .zip file to take it for a spin.

===
[ORIGINAL RESOURCE]
===

Instant Download!

PDF Accessibility Remediation How to Fix 40 Common Errors

Whether you have limited experience with the PDF remediation process, are expanding your knowledge on how to remediate PDFs, or simply need a resource that can help remind you how to fix a frustrating error, the info provided in this e-book can help.

Download now.

===