Flowcharts Accessibility How-To Guide
Purpose:
This guide will help faculty create accessible flowcharts so all students—including those using screen readers or other assistive technologies—can understand processes, workflows, and decision structures.
Accessible flowcharts ensure that each step, decision point, and outcome is clearly described through text as well as visual elements, allowing students to interpret the information even if they cannot see the diagram.
When creating flowcharts, faculty should ensure that visual steps are supported with descriptive text and logical structure.
1. Clearly Describe the Flowchart’s Purpose
Why: Flowcharts visually represent processes, decision points, or workflows. Without explanation, students who cannot see the flowchart may not understand its purpose or how the steps relate.
Providing a short introduction helps students understand what the flowchart represents before navigating the visual content.
How:
Before presenting the flowchart, provide a brief explanation describing:
- The process being illustrated
- The number of steps involved
- The overall goal or outcome
Example:
“The flowchart below illustrates the three steps required to submit an assignment through Canvas.”
Tips:
Avoid phrases such as:
“As shown in the diagram below.”
Instead explain what the diagram represents.
For more information, please visit Legible/Readable/Understandable.
2. Add Alt Text to the Flowchart
Why: Screen readers cannot interpret visual diagrams unless alternative text (alt text) is provided.
Alt text allows assistive technology to communicate the purpose and structure of the flowchart.
How:
In Word or PowerPoint:
- Right-click the flowchart.
- Select View Alt Text or Format Picture.
- Enter a short description summarizing the process.
Example alt text:
“Flowchart showing the assignment submission process: prepare assignment, upload file to Canvas, confirm submission, and receive confirmation.”
Tips:
Alt text should:
- Describe the overall process
- Focus on the instructional meaning of the flowchart
- Avoid describing every shape or arrow individually
For more information, please visit Alt Text.
3. Provide a Text Version of the Flowchart Steps
Why: Alt text alone may not be enough to explain a multi-step process or decision tree.
Providing a text-based version ensures that students using screen readers can follow the workflow step-by-step.
How:
Include a numbered list describing the flowchart steps near the visual.
Example:
Assignment Submission Process:
- Prepare the assignment document.
- Log into the Canvas course.
- Select the assignment submission link.
- Upload the file.
- Confirm successful submission.
Tips:
Text descriptions should follow the same order as the visual flowchart.
For more information, please visit Legible/Readable/Understandable.
4. Use Clear and Consistent Labels
Why: Flowcharts rely heavily on short labels within shapes, but unclear wording can make the process difficult to understand. Clear labeling improves comprehension for all learners.
How:
Each step should use short, direct language.
Examples:
Good labels:
Submit Assignment
Review Feedback
Start Process
Avoid vague labels such as:
Process Step
Action
Continue
Tips:
Keep labels simple and descriptive.
For more information, please visit Clear Structure.
5. Do Not Use Color Alone to Convey Meaning
Why: Students with color vision deficiencies may not distinguish meaning conveyed solely through color. Important decisions or steps must include text labels or symbols in addition to color differences.
How:
If color is used to distinguish steps:
- Add text labels to explain the meaning
- Use icons or shapes to reinforce differences
Example:
Instead of using only color:
Green box = approved
Red box = rejected
Use:
Approved (green)
Rejected (red)
Tips:
Color should support meaning, not be the only indicator.
For more information, please visit Color Considerations.
6. Ensure Text and Shapes Are Readable
Why: Small text or crowded diagrams can make flowcharts difficult to read for students with visual impairments or low vision. Readable design improves both accessibility and instructional clarity.
How:
Follow these guidelines:
- Use large, readable text (at least 18 pt in slides)
- Maintain high contrast between text and background
- Leave sufficient spacing between shapes
Tips:
Avoid:
- Overcrowded diagrams
- Small fonts
- Light text on light backgrounds
For more information, please visit Legible/Readable/Understandable.
7. Use Built-In Flowchart Tools
Why: Creating flowcharts with built-in tools ensures that the diagram remains editable and properly structured. Images or screenshots of flowcharts cannot be interpreted by screen readers.
How:
In Word or PowerPoint:
- Select Insert.
- Choose Shapes.
- Select shapes from the Flowchart category.
- Connect shapes using arrow connectors.
Alternatively, use: Insert → SmartArt → Process
Tips:
Avoid using:
- Screenshots of flowcharts
- Images exported from external programs without descriptions
Accessible diagrams should remain editable and accompanied by text explanations.
For more information, please review P.O.U.R Infographic document.
8. Review Flowchart Accessibility
Why: Accessibility checkers help identify missing alt text and other issues.
However, manual review is still necessary to ensure the process is understandable.
How:
In Word or PowerPoint:
- Select Review.
- Choose Check Accessibility.
- Address flagged issues such as:
- Missing alt text
- Unclear object structure
Tips:
Ask yourself:
- Can someone understand the process without seeing the flowchart?
- Is there a clear text explanation of the steps?
If yes, the flowchart is accessible.
For more information, please visit Accessibility Checkers.
Quick Reference / Checklist
|
Task |
Done? |
|
Provide introduction describing the flowchart |
☐ |
|
Add alt text to the flowchart |
☐ |
|
Provide text version of the steps |
☐ |
|
Use clear and descriptive labels |
☐ |
|
Avoid relying on color alone |
☐ |
|
Ensure readable text and spacing |
☐ |
|
Use built-in flowchart tools |
☐ |
|
Review accessibility before sharing |
☐ |