Making images accessible
Use text, not images of text
Images of text, and images containing text can all cause problems for
- users of mobile devices as the the lines do not wrap, so the browser scales the image down smaller making it more difficult to see.
- users of screen readers who will miss out on the text if no text equivalent is provided or if the text is too long in the alt text as some screen readers stop reading alt text content after a certain point (around 125 characters).
- users with low vision may find the image too blurry to read when scaled up.
Provide meaningful text equivalent for images
We must provide meaningful text description or alternative text (in the form of "alt text") for all information-conveying images. Screen readers read the alt text out to allow people with no/low vision to understand the purpose and meaning of the image.
- Always provide alt text for words in an image that are meant to be read.
- Describe the image in context.
- Keep alt text to about 100 characters (briefer than a Tweet).
- No need to start the alt text with "Image of ...".
- SEO benefit: descriptive alt text on an image will help improve content searchability.
Decorative images should have a blank or empty alt text
Decorative images (e.g. backgrounds, dividers) that convey no relevant information. We use blank alt text to tell screen readers to ignore the image; otherwise, the screen reader will read the image's file name one character at a time to the user.
How to provide alt text in T4 CMS?
In T4, we input alt text via the "Description field" of the image in T4's Media Library.
Complex images need extended, long descriptions
- Complex images are maps, graphs, charts, diagrams and illustrations where the page text relies on the user being able to understand the image.
- A long description is a more detailed description that provides equivalent access to the information in the image.
- Use captions to describe key points from a complex image.
- Flyers and posters need to have equivalent information presented in nearby text.
Avoid animated images
- Moving, flashing or automatically animating images can cause problems for users with cognitive impairments, motion sensitivity, or seizure disorders.