Skip to main content

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: 

  1. Right-click the flowchart. 

  1. Select View Alt Text or Format Picture. 

  1. 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: 

  1. Prepare the assignment document. 

  1. Log into the Canvas course. 

  1. Select the assignment submission link. 

  1. Upload the file. 

  1. 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: 

  1. Select Insert. 

  1. Choose Shapes. 

  1. Select shapes from the Flowchart category. 

  1. 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: 

  1. Select Review. 

  1. Choose Check Accessibility. 

  1. 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 

☐ 

 

Back to top