Images, Charts and Diagrams
Images, charts and diagrams are powerful tools for explaining information quickly, but only when everyone can access the meaning they convey.
For people using screen readers, magnification tools or alternative input methods, visual content needs a text equivalent that communicates the same information. When that text is present and well written, it benefits everyone: Content becomes clearer, more searchable and easier to reuse across platforms.
FOA already has strong foundations in place. Most improvements in this area are about making intent explicit, not adding technical complexity.
Images
Most images on FOA websites are supported by built-in accessibility features in SiteFarm. When adding images:
- Provide clear, concise alt text that describes what the image communicates.
- Mark images as decorative when they do not convey information.
- Avoid embedding important text inside images when the same information can be written as text on the page.
SiteFarm’s AI-assisted alt text is a helpful starting point. Editors are encouraged to review and refine it to make sure it reflects the image’s purpose in context. Learn more about Adding and editing images from SiteFarm (including 2026 updates about new AI tools)
Charts and Diagrams
Charts and diagrams often communicate relationships, processes or comparisons, not just visual appearance. This makes them slightly more complex, but still very manageable. The goal is simple: Someone who cannot see the chart should still be able to understand its meaning.
When using charts or diagrams, ask yourself this question:
What would I say if I had to explain this to someone over the phone?
That explanation becomes the basis for accessible content. You do not need to describe every visual detail. Focus on:
- What the chart or diagram is about.
- What the reader is meant to learn from it.
- Any key conclusions, trends or steps.
Recommended Approaches
1. Use visible text near the chart or diagram.
Whenever possible, include a short text explanation on the same page, immediately before or after the chart or diagram, such as:
- A short paragraph summarizing the takeaway.
- A brief list of steps or phases shown in a process diagram.
- A summary of key comparisons or trends.
This approach avoids “separate, but equal” content and benefits all users.
2. Use alt text for concise summaries.
Alt text for charts and diagrams should be high-level and purposeful. Good alt text answers:
- What is this?
- What is the main point?
Example (conceptual):
“Flowchart showing the annual budget planning process from initial proposals through final approvals.”
Detailed explanations belong in nearby visible text, not only in the alt text.
3. Provide structured text for complex diagrams.
For more complex charts or diagrams (timelines, workflows, multi-stage processes), it’s appropriate to include a longer text explanation directly on the page. This can take the form of:
- Headings and bullet lists.
- Numbered steps.
- Short sections with clear labels.
The structure matters more than the length.
What Website Editors Can Do
You do not need to be a designer or accessibility expert to make charts and diagrams accessible.
Here’s what helps most:
- Start with the message, not the graphic.
What is the chart meant to communicate? - Write the explanation first.
Then confirm the chart matches it. - Keep language clear and plain.
Avoid unnecessary jargon where possible. - Use headings and lists.
These help screen readers and improve readability for everyone. - Ask for help when needed.
Especially for diagrams that represent complex policies or workflows.
Small improvements can go a long way! Perfection is not the goal; clarity is.
How this work is supported
FOA is reviewing charts and diagrams as part of broader accessibility improvement efforts, using campus-supported tools and manual evaluation.
The focus for content creators is on clear explanations and thoughtful presentation, which are both achievable and impactful.