News

Flowcharts, and similar diagrams, are powerful tools for communicating steps in a process, or demonstrating organizational structure (org. chart). Specific software can aid in the design of flowcharts, but the need to create accessible information remains prevalent in all use cases. Whether you are designing your org. chart in InDesign, or creating a how-to document to explain a process in Microsoft Word, there are considerations that users can keep in mind.

Following a discussion between the State of Minnesota’s digital accessibility coordinators and a state employee, the Office of Accessibility combined their shared advice into key considerations to think about as you design your next flowchart or org. chart. Ken Graeve, a state employee from the Minnesota Department of Transportation, posed the initial question about flowcharts, “If the flowchart is so complicated that we have to depict it visually in order to make it easier to understand, then how should we make that accessible to the visually impaired while maintaining the simplicity?”

Start with Your Requirements

It is tempting to select a tool first, but it is a best practice to first understand your requirements to not only improves your chances of a successful diagram, but to also save time.

Consider the Information’s Complexity

Understanding requirements starts with understanding the information that needs to be communicated. David Miller from Minnesota IT Services (MNIT), partnering with the Department of Corrections, says, “Flowcharts with a lot of branching in them would be notoriously difficult to define a ‘proper reading order.’ Authors cannot predict which branch a reader will want to take. And if you find yourself at a node that has multiple ways of getting there, how does the app know which way is ‘back?’”

We recommend considering the number of layers your flowchart will have.

• Determine how many layers need to be presented in this one diagram. When working with a complex structure, consider multiple, simpler, diagrams.
• Decide if your readers will need to understand:
  • The overall structure, or
  • the detail of each level.

Determine the Frequency of Updates

Flowcharts can:

• Be produced once and never be updated, or
• be updated and republished, like an org. chart.

David Miller adds that, “visual representations are much more difficult to track changes over time. Most visual tools don’t have capabilities of identifying differences from one version to another, so the user has to do a side-by-side comparison on their own. For a flowchart with 10 nodes and 40 paths between the nodes, picking up the one or two changes may be extremely difficult.” Identifying those changes will be important as you update your text versions and alt text.

Plan Out The Flowchart Using Text

Planning the flowchart with text helps refine what tools you may want to use and whether to make one or several charts. Here’s an example of a common structure used for org. charts:

Option 1: Lists

“Build ordered lists with ‘If X, then go to Y’ language for branching decisions. It’s like a make-your-own adventure book,” says Miller.

JoAnn Rautio, the digital accessibility coordinator for MNIT partnering with the Department of Employment and Economic Development, adds, “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 flowchart.”

List Example

For a group that all reports to Andrea, you may have:

• Annie
  • David
  • Karen
    • Bob
    • Tricia
• Ken
  • Nancy
  • Lea
• Richard
  • John
  • Steve
• Becky
  • Andrew
  • Charlie

Option 2: Headings

Headings can be another way to use text to communicate structure, especially for org. charts. For example:

• First level heading is the name of the chart.
• Second level heading is the person at the top of the org. chart.
  • Include paragraph text or an unordered list under this level for people that report to the person at the top of the organization.
• Third level headings for each person that reports to the second-level person
  • Paragraph text under each third level heading is for the individuals that report to the person in the third level heading.

This only works for so many levels to keep the process understandable. If there are more than 4 levels, consider breaking the charts into several sub-charts.

Heading Example

Note: This is an image of the example, rather than real text. It includes the names and organizational structure in Option 1 but applies the heading structure described in Option 2.

Select the Flowchart Creation Tool

Once you understand your requirements, select which tool will best communicate the information. Today most tools are unable to create an image or group of images that communicates to users of assistive technology:

• the text within the image,
• the relationship between two individual points within the image, and
• the larger structure of the flowchart.

If using one of those tools, it will be important to create a single image used in the final format and consider how to communicate the information in a text only format.

Other considerations for flowcharts include:

• using colors with good contrast for text and background in the image
• using methods other than just color (shapes, for example) to communicate concepts
• the quality of the image produced so that if magnified, the image is still clear.

Make the Flowchart Into a Single Image

Once the tool has been selected and the flowchart has been created it most likely has a group of images. For those readers who cannot see the image, or find text easier to understand than an image, they may be using assistive technology to read or understand the flowchart by accessing the image description (alt text). When they access each image within the group, it takes more time to access the chart, and this still may not communicate the goal or message of the group of images – the relationship between each image.

In this example of a flowchart in a PDF, the diagram is made up of several shapes. The “tag tree” on the left has one of those shapes (the triangle) selected and tagged as a figure tag. There is a figure tag in this tag tree for each part of the diagram.

In this case, the focus of the image is the group, not each individual shape. If describing the group of images to someone over the phone, we would describe the relationship between them, because the shapes are representing how four ideas relate to the central one. We would not describe that there is a brown triangle with a line connecting it to the central blue circle, then say that there is a green diamond, with a line connecting it to the central blue circle, and so on.

If, as in the example above, the goal is to communicate the relationship between the different flowchart components, or it is a more complicated flowchart which will be accompanied by text elsewhere in the document, then you’ll want to convert the chart to a single image. If the tool won’t export the entire flowchart as a single image, then take a high-quality screenshot. Be sure to test to ensure this is clear when magnified to 200%.

There are occasional times where it is acceptable to include individual elements of a flowchart. JoAnn Rautio notes one scenario: applications that allow the reader to zoom into specific sections or break out the flowchart into individual portions, allowing the user to navigate to the section of interest. In such cases, you will still need to provide an overall text description of the flowchart, as well as an accessible way for all users to navigate to and understand each individual portion.

Don’t Forget About Alt Text

Becky Bernauer, accessibility coordinator for MNIT partnering with the Department of Health, has a great strategy for creating a single alt text for the entire flow chart. “I encourage creators to think about how they would explain the chart over the phone to someone and then include that in the text . We make the visual piece one image and the alt text is something like, ‘Flow Chart of X, text details found (name heading of where details are included).’”

All of the digital accessibility coordinators interviewed agree that as the diagram becomes more complicated, and without the ability to move easily between the high-level overview and into areas of interest, alt text for individual portions of the graphic no longer provides useful information. In most situations one alt text for the entire diagram is the best solution. Either summarize the relationships in the alt text or name the flow chart and explain where the reader can find the full description.

Publish the Text Versions

Providing both the visual and the text version used for planning provides access for a wider audience. You might be surprised by the number of people that use each format (visual, text) or both, based on their preference.

If publishing in a document, include the ordered list or heading version below the flowchart, or in an appendix. If posting on a webpage, provide the information below the chart or have a link below the image that takes readers to the location of the text version. Do not list the URL for the other version in the flowchart’s alternative text, as this cannot be used by assistive technologies to navigate to the other location.

For Flowcharts That Get Updated

Bernauer adds that following the above process makes it easier when the flowchart or org. chart is updated. “When you provide the text version after the visual version, it’s very easy to update once you have it set up. Just one image to add alt text to and whatever text needs to be changed. It’s a five-minute turn-around.”

Keep Learning!

Our digital accessibility coordinators know that new techniques evolve and software vendors improve the digital accessibility of their products. The coordinators read advice from various resources, test to see how they work in their particular use cases, and work with teams to ensure the solution is the best available at the time.

Here are some of the resources they have found helpful:

• Penn State’s Flowcharts and Concept Maps
• WebAIM Email Archive – How to make accessible flowcharts?
• Microsoft’s Make your Visio diagram accessible to people with disabilities