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.


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.