Documents
Part of Business diagramming software: Visio, Lucidchart and Miro
Checking accessibility and readability of diagram outputs
Review a published diagram's text alternative, full explanation, contrast, scale and reading order in web and PDF outputs.
Check the file people will receive in its published setting. A diagram may be readable in its editor yet become too small on a web page or fail to explain its connections to someone using a screen reader. Exporting it or passing an editor check does not establish that the final output is accessible.
State the diagram's message in words
Ask the author to explain the diagram in plain text. For a process map, identify the starting condition, each decision, where its routes lead, who owns each step and the outcomes. If the team cannot agree on that account, clarify the diagram itself.
For a complex image, a short alternative such as “process flowchart” identifies its kind but not its meaning. W3C guidance calls for a short text alternative and a fuller account of essential information and relationships. On a web page, the fuller account can appear in visible text beside the diagram. Update it when the diagram changes.
Check what sighted readers can distinguish
View the export at its actual page width, on a narrow screen and at increased zoom. Follow every connector. Look for colliding labels, faint arrowheads and text that becomes too small. Split an overfull diagram if it cannot be read at the intended size.
Do not use colour as the only signal for status, owner or branch type. Add a label, pattern or other visible cue. For web content assessed against WCAG 2.2, ordinary text and images of text generally need at least 4.5:1 contrast; large text needs 3:1, subject to the criterion's exceptions.
For graphics, check whether the visual elements needed to understand the content are distinguishable from their backgrounds. W3C's example shows a white phone icon on an orange circle with contrast greater than 3:1; treat this as an example, not a universal pass rule.
| Output check | What to look for |
|---|---|
| Text alternative | Does it identify the diagram and point to the full explanation? |
| Full explanation | Can someone follow decisions and outcomes without seeing the image? |
| Colour and contrast | Are routes clear without colour alone, and do essential parts meet applicable criteria? |
| Scale | Are labels and connectors usable at display width and zoom? |
| Reading order | Does the explanation appear in a sensible place for assistive-technology users? |
Contrast requirements for accessible diagrams (WCAG 2.2)
- Ordinary text and images of textMinimum contrast ratio of 4.5:1
- Large text (18pt or 14pt bold)Minimum contrast ratio of 3:1
- Non-text elements (icons, shapes)Must meet non-text contrast criteria
- Example: white phone icon on orange circleContrast > 3:1 – use as guideline, not universal rule
Key accessibility metrics for diagram outputs
- Minimum contrast ratio (text)
- 4.5:1
- Minimum contrast ratio (large text)
- 3:1
- Colour as sole signal
- Not acceptable – must include labels, patterns, or other cues
- Screen reader compatibility
- Requires full explanation in text alternative
Inspect each published format
For a web image, inspect the rendered page, its alternative text, nearby explanation and reading order. If the diagram is interactive, check its controls and keyboard operation separately.
For a PDF, inspect the exported file using the organisation's PDF accessibility process. Microsoft advises using Visio's Accessibility Checker to tackle issues that might make diagrams difficult to use, and includes a section on converting a diagram to an accessible PDF.
Neither step proves that the explanation is complete or that the final PDF works for every reader. Keep the source and PDF together so corrections can be made at the source.
Ask someone unfamiliar with the work to explain the normal route and an exception from the published version. Include people with relevant access needs where possible. Record the file version, viewing setup, barrier and correction. Repeat affected checks after a change.
