Formatting and Use of Diagrams Accessibility How-To Guide
Purpose:
The guide will assist faculty in creating accessible diagrams so all students—including those using screen readers or other assistive technologies—can understand visual information. Accessible diagrams ensure that visual relationships, processes, and concepts are communicated through both visual and textual information, allowing all learners to interpret the content. Diagrams should always include clear descriptions and accessible formatting so students who cannot see the visual can understand the instructional meaning.
1. Ensure Diagrams Convey Clear Meaning
Why: Diagrams are often used to represent relationships, processes, or structures. Without clear explanations, students who cannot see the visual may miss important instructional information.
Providing supporting text ensures the information is accessible to students using screen readers or other assistive technologies.
How:
When using diagrams:
-
Provide a text explanation near the diagram describing the concept
-
Describe the key components and relationships
-
Explain how the diagram supports the learning objective
Example:
Instead of writing: “As shown in the diagram below”
Write: “The diagram illustrates the three stages of the research process: planning, data collection, and analysis.”
Tips:
Never rely solely on a visual diagram to explain important information.
For more information, please review the P.O.U.R Infographic document.
2. Add Alt Text to Diagrams
Why: Screen readers use alternative text (alt text) to describe visual elements to users who cannot see them. Without alt text, diagrams are invisible to assistive technologies.
How:
In Word or PowerPoint:
-
Right-click the diagram.
-
Select View Alt Text or Format Picture.
-
Enter a short description explaining the diagram’s purpose.
Example alt text:
“Flowchart showing the five steps of the scientific method: question, research, hypothesis, experiment, and conclusion.”
Tips:
Alt text should:
-
Describe the instructional meaning, not every shape or arrow
-
Focus on key relationships and outcomes
Avoid describing purely decorative elements.
For more information, please visit Alt Text.
3. Avoid Diagrams That Are Too Complex
Why: Highly complex diagrams can be difficult to understand visually and are often impossible to fully describe through alt text alone. Simplifying diagrams improves accessibility and comprehension for all students.
How:
Design diagrams that:
-
Focus on one primary concept
-
Use limited shapes and connections
-
Clearly label each component
If a diagram contains multiple concepts, consider:
-
Breaking it into multiple smaller diagrams
-
Explaining each step separately
Tips:
Simple visuals are usually more effective for teaching and accessibility.
For more information, please review the P.O.U.R Infographic document.
4. Ensure Text in Diagrams Is Readable
Why: Small or low-contrast text inside diagrams may be difficult for students with visual impairments or low vision to read.
Accessible diagrams ensure that text remains clear, readable, and high contrast.
How:
Follow these guidelines:
-
Use large, readable fonts (minimum 18 pt for slide diagrams)
-
Use high contrast colors (dark text on light background)
-
Avoid placing text over complex backgrounds or images
Tips:
Avoid:
-
Thing or decorative fonts
-
Light gray text on white backgrounds
-
Overcrowded labels
For more information, please visit Color Considerations.
5. Do Not Use Color Alone to Convey Meaning
Why: Students with color vision deficiencies may not distinguish meaning conveyed solely through color.
Important information should always be communicated using multiple visual cues.
How:
Combine color with:
-
Labels or text
-
Patterns or shapes
-
Icons or symbols
Example:
Instead of relying only on color:
Red arrow = incorrect process
Green arrow = correct process
Use: “Correct Process” and “Incorrect Process” labels in addition to color.
Tips:
Always assume some students cannot distinguish certain colors.
For more information, please visit Color Considerations.
6. Use Built-In Diagram Tools When Possible
Why: Using built-in tools such as SmartArt or diagram tools help maintain structure and readability.
These tools also make diagrams easier to edit and update.
How:
In Word or PowerPoint:
-
Select Insert.
-
Choose SmartArt.
-
Select a diagram type (process, cycle, hierarchy).
-
Enter text within the SmartArt structure.
Tips:
Avoid creating diagrams using:
-
Screenshots of diagrams
-
Text boxes placed randomly on the slide
-
Images of diagrams without text alternatives
Accessible diagrams should remain editable and structured.
For more information, please review the P.O.U.R Infographic document.
7. Provide a Detailed Description When Necessary
Why: Some diagrams contain complex processes or relationships that cannot be fully explained in short alt text.
Providing a longer description ensures all students understand the diagram’s instructional meaning.
How:
If the diagram is complex:
-
Provide a paragraph description below the diagram
-
Explain each step or component
-
Describe how the elements connect
Example:
“The diagram shows the course development cycle. Faculty begin by defining learning objectives, followed by designing assessments, creating instructional materials, and evaluating student outcomes.”
Tips:
Detailed descriptions should focus on learning concepts rather than visual layout.
For more information, please visit Legible/Readable/Understandable.
Quick Reference / Checklist
| Task | Done? |
| Provide text explanation near the diagram |
☐ |
| Add alt text describing the diagram |
☐ |
| Ensure diagram text is readable |
☐ |
| Use high color contrast |
☐ |
| Avoid relying on color alone |
☐ |
| Keep diagrams simple and focused |
☐ |
| Provide detailed description for complex diagrams |
☐ |