Skip to content


About images and accessibility

Someone who is visually impaired may be using a screen reader. A screen reader can identify images, so they should be placed in the page in a way that this technology can access. Images can add immense value to the content and to the users' understanding of the content. For people with low vision, combining colour with pattern can help them distinguish elements of an image.

Single A

As part of a webpage, images are all downloaded and rendered before the page content can be used by assistive technology such as a screen reader. Therefore, to reduce the wait for people using assistive technology, images should be optimised (reduced to the smallest usable size and with the lowest quality needed for display) before they are put in a webpage. Faster webpages are also ranked higher by Google.

Making images

If using animated gifs, they should stop blinking within 5 seconds, and not flash more than three times in any one second period. If flashing images are a vital part of the page, keep the flickering area safely small. There are formulas to help calculate the safest size of the flickering area for people who have photosensitive epilepsy.

Use pattern with colour to provide more information, for example, a map showing alternative routes in different colours should also have different markers along each route.

Making the purpose of your images clear

Images need to be placed in the page using the programmatic language of the page, for example, as using the img element in HTML. The alt text, which is part of the img tag, can be used to provide more information about the image.

If the image is for decoration only, then the alt text can be left blank: alt="". A screen reader will 'ignore' the image.

If the image is an important part of the content, it must have a text alternative that serves the same purpose. This alternative can be

Or, a short description of the image and a long description in the text near the image, with a reference to the long description in the short description.

Specific techniques

Note: Using the longdesc attribute, a recommended WCAG 2.0 technique; although longdesc is used by screen readers, it is not shown or rendered by any of the major browsers. It is better to add a visible link to a longer description. That way, everyone can use it.

Double A

No specific requirements for images.

Triple A

No specific requirements for images.