Flowcharts guide readers through a complex process in a visual manner. These visuals can help users make better decisions about a complex issue, making flowcharts a valuable communication tool.
However, like any image published on the web, without a text description these complex images are completely inaccessible for non-visual readers. Additionally, some people prefer to read through processes in a textual way as opposed to reviewing a visual, or are partial to using both the text and visual to understand a process.
While there are several types of flowcharts available, here are five tips to make your next project more accessible to all users.
1. Outline first, design second
Several diagramming programs make it easy to plug content in and generate a flow chart. This can make it tempting to bypass the outline phase of the process.
However, if you outline all your steps and requirements first, the design stage becomes more intentional and you will have a text description ready for when you publish. Follow these tips to create your outline.
Use headings, ordered lists, and unordered lists to organize decisions and steps
Headings are a great way to indicate the start of your process or highlight key steps in the process. These headings provide a navigation point for visual and non-visual users to follow in your text description.
Ordered, or numbered, lists are a great way to outline the entire process in a linear manner. The steps in your ordered list represent the main steps a user needs to take in the process. Using numbers allows you to easily reference a particular step as users move through the process.
Unordered, or bullet, lists can indicate specific decisions at a point in the process to direct users to the next step.
Example of process outline
1. Review data to determine if criteria is present
- If yes, proceed to process step 2
- If no, proceed to process step 3
2. Process step 2
- Directions for completing process step 2
- Upon completion of process step 2, stop.
3. Process step 3
- Directions for completing process step 3
- Upon completion, proceed to process step 4
4. Process Step 4
- Directions for completing process step 4
- Upon completion of process step 4, stop.
2. Design for readability
Once you have your outline you can design a flowchart image that represents your process. Here are some tips to keep in mind as you design.
Keep it simple
Since you have all your directions provided in the outline, keep the visual as simple as you can without sacrificing meaning. Leave the detailed directions off the chart as they can be difficult to interpret in an image. Use shorter phrases to convey the different steps to help users read through the process more easily.
Use accessible colors and fonts
Ensure any colors used are accessible. This means your colors must have enough contrast between the foreground and background. You can use a tool like the TPGi’s Colour Contrast Analyzer to review your contrast ratios. Also, review UM’s Brand Standards Digital Colors if needed.
Any fonts used should be readable and sized large enough to read easily. Aim for a font size no smaller than 16pt and review UM’s Brand Standards Typography.
Example of a process as an image
Plugging our process outline into an image may look something like the example in Figure 1.
This example uses accessible colors and a readable font that is sized 16 pt. The start, decision, and stop points are all the same color.
The step that precedes a key decision point is different from the steps that come after a decision.
This example also includes lines and arrows to help direct users through the different steps of the chart and uses simple phrases to highlight the different steps along the paths.
3. Save as a single image
After you have designed your flowchart, save the entire project as a single image. This will make it easier to provide a single alternative text description and caption on your webpage.
4. Publish with text description
Add your flowchart image to your webpage along with the text outline description. For your alternative text and caption, provide clear information to explain to users the purpose and function of your image. If your readers would benefit from or want a printable version of your flowchart you can include a PDF that’s clearly labeled as such.
Consider the following criteria
- Alternative text: Flow chart for [name of process] – find full description on page
- Link: set link to open media file, this allows users to view a full-size image if needed
- Caption: [Figure label, if needed] Select to view the full image.
- Text Description: Include a heading tag to clearly identify the process. If copy and pasting from original source document, paste as plain text and style using WordPress visual editor.
- PDF: Download Printable Flowchart (PDF)
- Contact Information: provide contact information for the person or department who can provide assistance if users run into any issues or have questions.
5. Make a plan for updates
Since flowcharts often reflect a particular process, you may need to update them if that process changes over time. Consider reviewing your flow charts on a regular basis, such as once a year or semester, as needed.
You may also need to update your flow charts based on user feedback. If you receive several questions about a particular step in the process, perhaps more guidance is needed to help users through the steps.
What if I have a flowchart already published on my page?
If you currently have a flowchart published on a web page that isn’t accessible, review to ensure the image itself follows the principles of accessible design (simple, easy to follow, accessible fonts and colors).
If the image does not require any editing then provide a text description of the process following the principles provided in the Outline first, then the design section of this post.
If the image does require editing, follow the steps outlined in the Design for readability section of this post.
Pulling it all together!
Here’s an example of how this process works together using both the image and text description of a process.
Steps to Complete Process
Process Description
1. Review data to determine if criteria is present
- If yes, proceed to process step 2
- If no, proceed to process step 3
2. Process step 2
- Directions for completing process step 2
- Upon completion of process step 2, stop.
3. Process step 3
- Directions for completing process step 3
- Upon completion, proceed to process step 4
4. Process Step 4
- Directions for completing process step 4
- Upon completion of process step 4, stop.
Questions?
For questions or assistance with this process contact accessibility@olemiss.edu.