Skip to content
Accessible Images Guide
How to use images so everyone gets the meaning
The goal
Images should either:
- Add meaning (and have an equivalent text alternative), or
- Add decoration only (and be skipped by assistive tech)
When images are inaccessible, people can miss key information or be blocked from completing tasks.
Step 1:
Decide what the image is doing
Before you publish, categorise the image. This determines what you need to do next.
A) Informative image
Photos, illustrations, icons, and graphics that add meaning or context.
You must:
- Provide text that communicates the key message (usually via alt text, sometimes via nearby text too).
B) Decorative image
Used for style, mood, or layout only. The page still makes full sense without it.
You must:
- Mark it as decorative (empty alt)
- Or implement as a CSS background so it is not announced.
C) Functional image
An image that acts as a control or is part of a control, like an icon button or linked image.
You must:
- Describe the action or destination, not the appearance.
D) Image of text
Words are baked into the image.
Best Practice:
- Avoid this except for logos.
- If you cannot avoid it, the text alternative must include the same words.
E) Complex image
Charts, diagrams, maps, infographics.
You must:
- Provide the underlying meaning and data in text form somewhere (summary, table, or downloadable data).
- Alt text alone is not enough.
F) Group of images
Multiple images together that communicate one message.
Best Practice:
- Provide one combined text alternative that captures the overall meaning.
- Don’t repeat yourself on every image.
G) Image map
One image with multiple clickable hotspots.
You must:
- Give an overall description for the image and a clear label for each hotspot action/destination.
Step 2:
Make the equivalent information available
This is the “what would someone miss if they can’t see it?” step.
Provide the meaning in one of these ways
- Alt text (most common for web images)
- Visible text near the image (good for charts and complex visuals)
- A text summary + data table (best for charts)
- A data download link (helpful for charts and maps)
Quick test:
If the image disappeared, would the page lose meaning or become harder to use?
- If yes: it needs a meaningful text alternative.
- If no: it is probably decorative.
Step 3:
Image-by-image checklist
Informative images
- Alt text communicates the key message (not every detail)
- It fits the context of the page
- It is not repeating nearby text word-for-word
- It avoids “image of” unless the format matters (for example, “painting”)
[Subject] [doing what] [only include key detail that matters here]
Eg: “Hotel front desk concierge presenting guest with forms to check in”
Decorative images
- Marked as decorative (empty alt tag)
- Not announced by screen readers
- Not the only place important information appears
Functional images (icons, buttons, linked images)
- Alt text describes what happens when activated
- It is clear out of context
- If there is already a visible label that fully describes it, the image can be decorative
Examples of good functional wording:
- “Search”
- “Open map”
- “View room details”
- “Download brochure (PDF)”
Images of text
- You have a strong reason not to use real text
- Any important words in the image also exist as real text, or are included in the text alternative
- You have checked readability on mobile (text in images often becomes tiny)
Rule of thumb:
If it needs translation, resizing, user styling, or screen reader access, it should be real text.
Complex images (charts, diagrams, maps)
- Provide a short summary of what the chart shows and why it matters
- Provide the underlying values in text form (table, list, or download)
- Do not rely on colour alone to convey meaning
- Use labels, patterns, or markers to differentiate series
Template: chart summary
(good for captions or nearby text)
- What it is: “Bar chart comparing booking sources in 2025.”
- Main insight: “Direct bookings increased steadily from March to August.”
- What matters: “Email campaigns drove the sharpest month-on-month rise in June.”
- Where the data is: “Data available in the table below / via ‘Get the data’.”
Step 4:
Interactive charts checklist
Interactive charts add controls, which creates extra accessibility requirements.
Choose accessible chart tools
Prefer chart libraries that support accessibility features and customisation.
Keyboard interaction
- Every interactive element is reachable by keyboard
- Tab order is logical
- Focus is clearly visible
- Tooltips and data points can be reached and read without a mouse
Screen reader support
- The chart has a clear title and labels
- There is a text summary of the purpose and the key insight
- Controls have meaningful names
- Any data a sighted user can access is available in an equivalent text form
Colour and contrast
- Colour is not the only indicator
- Contrast is strong enough for readability
- Patterns or labels are used when colour distinction might fail
Step 5:
Data visualisation options (practical features to aim for)
If your charting tool supports it, include:
- A colour blindness check or contrast check
- A visible “Get the data” download link
- A dedicated alternative description field for screen readers
- A sensible fallback description when no description is provided
These features make charts more usable for people who access content through assistive technologies and for people who need or prefer the data in text form.
Step 6:
Publishing checklist for content teams
Use this as a final QA pass.
Every image
- Has an appropriate text alternative strategy (meaningful alt or empty alt)
- Does not rely on colour alone
- Does not include important text baked into the image (unless unavoidable)
For galleries and carousels
- Controls are labelled (Next, Previous, Pause)
- Movement does not trap attention or distract
- Users can pause or stop auto-rotation
- Images still make sense when read in sequence
For social assets and CRM
- The message is also communicated in the post copy, not only in the image
- Key details are not locked inside a graphic
- Any linked images have clear destination wording
