Images and text alternatives: accessibility for developers

  • Author: Access iQ ®
  • Date: 3 Jan 2013
  • Access: Premium

Quick facts

Images play an important role in conveying information on websites, however not all users can see them. Therefore when an image is used on a website their content and meaning need to be made available to people with disabilities.


  • Always use an alt attribute
  • How to use background, spacer and decorative images
  • Writing alt text
  • Images of text, form button images and image maps
  • When to use a long text description

Images play an important role in conveying information on websites, however not all users can see them. Therefore when an image is used on a website their content and meaning need to be made available to people with disabilities.

Success Criterion 1.1.1 Non-text content states:

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below. (Level A)

It then continues by listing several exceptions, some of which are specific to images, which we will discuss shortly. The core requirement of this success criterion is that the text alternative provides the user an equivalent experience that does not put them at a disadvantage. For this reason writing a good alt text is crucial.

It is not the responsibility of the developer to write the alt text, but it is important for the developer to know that there must always be a text alternative for all non-text content, whatever that may be.

Always use an alt attribute

In HTML, the alt attribute of the img element allows us to provide a text "alternative" for images, for assistive technologies or other user agents to make use of. You might hear the alt attribute referred to as an alt tag. The values applied to it are often referred to as alt text. The alt attribute must always be present within an image element, even if it is empty.

For people who are blind or vision impaired and who use screen readers to interpret information on a screen, the screen reader will read the alt text when the image receives focus. Therefore it is important that the alt text serves an equivalent purpose as the image serves for people without a disability.

Which images require alt text?

The purpose of the image within the webpage helps determine the best method to write and deploy the alt text, including the need to always declare the alt attribute but occasionally leaving it empty, with a null value, if appropriate.

Images can be grouped into two categories for the purpose of deciding alt attributes:

  1. Decorative: Images that are purely decorative and offer no real function or content.
  2. Meaningful: Images that convey meaning, have a function or have a purpose.

If an image conveys information or has a function the alt text must describe what the image is about and convey why it's there. The aim is to convey textual meaning equivalent to the meaning provided by the image.

Premium Content

Premium content is available to users that have a current subscription to the content.

This topic is part of our premium content range. To access it, you need a 12-month premium subscription — but let’s put that in perspective. How many hours will you waste if you try to find free information on the internet? And how can you be sure that free info is correct? Or comprehensive? Or specific to your role?

With a premium subscription, you get virtually everything you need, all in one place. All you need to do is follow the information provided, and you’ll know you’re covered.

Each subscription includes:

  • A year of content updates — Premium content is updated regularly, and you get all of those updates for free.
  • Professional support — Ask questions or request further information from an Access iQ™ specialist.
  • Access to Q&A — See the questions and answers submitted by other premium subscribers, so you remain up-to-date on the accessibility challenges faced by others in the industry.

Unlock this content: