AccessibilityImages
Images, charts, icons and infographics on websites have different purposes.
These include but are not limited to:
- giving information
- making a webpage more visually attractive
- interactivity, such as buttons and links
For blind and visually impaired people, missing out on these images can sometime mean missing out on important information or instructions for completing a task. It’s important to provide alternatives to images that help these users.
See the impact that accessible images have on people who use text to speech software, or read about Ilya, senior staff member who is blind.
Helping everyone
Making your images accessible can benefit users with and without a disability.
For example, if someone switches off images to save bandwidth or if images do not load having alt text is helpful.
The basics
Do:
- provide alt text for informative images
- provide alt text to describe the functionality of images used as links or buttons
- provide empty alt text for decorative images
- provide longer text descriptions and data for complex images such as charts and diagrams
Do not:
- include meaningful text as part of an image
- use the longdesc attribute to provide a long description
| User | Access need | May find helpful |
|---|---|---|
| Blind or partially sighted | Cannot see images | Alt text allows assistive technology to read it aloud, present it visually, or convert it to braille |
| Motor impaired | Cannot interact with image links and buttons | Alt text allows speech-to-text software to select image links and buttons |
| Cognitive impairment | May have issues understanding the meaning of images | Alt text presents an alternative way to present meaning |
Creating accessible images
You should make your images as accessible as possible as well as providing appropriate alternatives to ensure that everyone has a comparable experience.
The Image Concepts tutorials provide a great exploration of accessibility considerations.
Alt text
All images must have an alternative text (usually called ‘alt text’) description that describes its meaning, not what it is. How you write the alt text depends on the type of image. Refer to the alt text decision tree if you do not know what your image is.
Here’s what to add to the alt text field for different sorts of image:
- images that communicate information such as icons and logos: a short text description
- editorial images that support the text around them (such as photos in a news article): a short text description
- decorative images that don’t add any information: leave the alt text field empty, with no space between the quotations and no other text
- functional images that act as a link: describe where the link will take the user
To check if an image has the necessary alt text, right click on the image and select ‘Inspect’. Check the image tag to see if there’s an alt tag and whether its text description is appropriate for the image.
Text in images
Do not include meaningful text as part of an image or people using assistive technology may not be able to read it. Meaningful text is anything that is used to aid understanding for users.
Complex images
Sometimes we use graphs or diagrams to explain complicated topics or data. These can be hard to describe and usually cannot be done so effectively using alt text alone.
Instead, you should think about the information you’re trying to convey. Perhaps think about how you would explain the point of the image to people if you were showing it in a presentation and use this as the basis of your description.
With complex images, put a thorough description of the graph or diagram in context in the surrounding text. You should also use alt text to let users know where this description is. Do not use the <longdesc> attribute to provide a longer description as this is no longer recommended.
You should also provide links to any underlying data so users can explore the information directly.
Scalable Vector Graphic (SVG) images
When using an SVG in the src attribute of an image, use alt text.
When inserting the SVG image directly, provide the text alternative in a title element.
Groups of images
For a group of images conveying a single piece of information, such as a star rating, only one of the images needs to have alt text. The other images in the group can have empty null alt text.
For images with multiple selectable regions, alt text should be provided for all area elements.
Get in touch
If you’ve got a question or suggestion share it on the UK Home Office Slack channel #ask-accessibility or email accessibility@homeoffice.gov.uk.