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.

Why all images must have an alt attribute

If the image is used only for decorative purposes, declare the alt attribute, but leave the value blank, e.g. alt=””. This acknowledges that an image is present but communicates that the image has no function or meaning. This is different to not including an alt attribute at all; as some screen readers may attempt to describe an image with whatever it can find when it does not detect an alt attribute. An empty alt attribute tells the screen reader the image is decorative or has no useful information so that it will not read information in the element.

  • It is therefore mandatory for all images that are not included using cascading style sheets (CSS) to have an alt attribute, whether it has a value or remains empty.
  • When an alt attribute is empty (i.e. alt="") a screen reader will ignore the image and will not read out anything. Screen readers ignore images with empty alt attributes.

However, if there is no alt attribute, a screen reader will not ignore the image and instead read out the filename and/or URL of the image, which can be long, unhelpful and very annoying for the user, particularly when repeated several times across a single webpage.

The use of alternative text is the most misunderstood and badly deployed aspect of web design and development. The correct deployment of alternative text will address the most common issue affecting web accessibility.

  • Decorative images should be referenced and positioned with CSS, removing the requirement for an alt attribute.
  • Decorative images referenced in the HTML must have an alt attribute that is empty
  • Meaningful images should be referenced with HTML, not CSS, in order to have an alt attribute and be noticed by assistive technologies.
  • Meaningful images referenced with HTML must have an alt attribute and the text value in the alt attribute must convey the meaning and provide the equivalent content of the image.

Background, spacer and decorative images

Within a web design, there may be decorative images such as background images and spacers that only serve superficial purposes. A decorative image provides absolutely no information to the user and serves no informative function within the website.

According to one of the conditions under Success Criterion 1.1.1 Non-text content:

If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.

Decorative images that are part of the template design should be created using CSS. There are two specific WCAG 2.0 Techniques that describe methods of achieving this:

  1. Technique C18 recommends using CSS margin and padding rules instead of spacer images for layout design.
  2. Technique C9 recommends using CSS properties like background, background-image, content combined with the :before and :after pseudo-elements and list-style-image to include purely decorative images and images used for visual formatting.

Adding these images using CSS instead of within an img element ensures that these images are ignored by assistive technology such as screen readers. If the image is decorative only and cannot be included using CSS, then the alt attribute of the img element must be present but empty so that a screen reader disregards them.

The content of alt text is very important and one of the more difficult content items to get right, as it depends on the context of the image as much as the image itself. Do not be tempted to use "just a decorative image" as alt text, as that is what will be read out to the screen reader user. It's not hard to imagine how annoying that can be.

Writing alt text

It is very likely that the responsibility for providing alternative text content for images will not reside with the developer but instead fall to colleagues who are content authors and managers, or quite possibly the website client.

If your colleagues or clients are not experienced in writing text alternatives for images within content, you may refer them to the topic on images and text alternatives for content authors. As a developer, you should understand the principles involved with the alt attribute, even if the content of the attribute is not your responsibility, so you can help spot and fix problems and spread the knowledge among the web team.

If you know that a designer or a content author is meant to add alt text later, do not put placeholder text such as alt="alt text goes here", in the alt attribute. You'd be surprised how many times blind website visitors have that read out to them by their screen readers. It is easy to forget to update some of the alt text placeholders, leaving it to the users of assistive technology to experience your unfinished work, reflecting badly on both you and your client.

The type of image, and the function of the image in the context of the page will determine the content of the alt text. A common mistake is describing what is represented in the image rather than the meaning the author intends by including the image. The same image may have completely different alt texts when placed in different contexts. Therefore an alt text depends heavily on the context it is placed in and the purpose the image has within its surroundings.

A man wearing a bowler hat and holding an umbrella.For example, the alt text for a photo of a man in a bowler hat holding an umbrella may be different on one website that sells bowler hats to another that describes umbrellas, to another describing the actor or model in the image.

 Three versions of alt text with different contexts:

  1. The "Windsor" is our finest bowler hat, made from the best materials and custom fit to your specific dimensions.
  2. A "Monarch" umbrella with chromium tip and maple "C" handle.
  3. John MacAllop dressed as Steed from the Avengers for the Oxford Arts Groups annual TV character week.

Be mindful of images that do not contribute to the meaning of their surroundings on the page. These images are therefore purely illustrative and do not convey meaning.

For example, an illustration of a burning candle may help to give a Christmas feel to an article about Christmas. The author may choose to use "An illustration of a burning Christmas candle" as alt text. However, this doesn't convey any meaning that enhances the accompanying text, while making a screen reader read this out to a user will slow down their perception of the meaningful content.

Also, since alt text is an attribute within an img element, and screen readers are aware of image elements, it is not required to announce it is an image, picture or illustration, unless the context deems that to be important information. Adding "an image of..." to alt text is akin to saying "I am talking on the telephone to you" to the person you are talking on the telephone to.

It may sound trickier than it really is. Be guided by testing a webpage for yourself with images turned off. Even if you don't have access to a screen reader, reading the alt text for images as you scan the content of a webpage will go a long way to discovering if you're on the right track. .nder thee conditions what to do with the alt attributes of icons in these sutuaf some sort.context deems ge elements andmayems If the content, including alt attributes, conveys the meaning with images turned off, then the text can be said to be adequate.

Special cases

When in doubt of how best to apply accessibility, and interpreting the guidelines does not supply a sufficient solution, consider testing options as prototypes with people with disabilities or imitate their conditions (turning off the monitor, using a screen reader), to perform tasks.

Icons as links

An icon is a small image that is used alone or in combination with a text label, usually to signify a button, control, label, symbol, marker or call to action. The text alternative solutions for icons used as links are:

  • If an icon is used in combination with a text label and does not add further information, use an empty alt attribute (Example 1)
  • If an icon used in combination with a text label provides further information or has a function that is not conveyed in the associated text label, use appropriate alt text (Example 2)
  • If an icon is used without a text label and provides information or has a function, use appropriate alt text (Example 3)

When an icon is used in combination with a text link, ensure the icon and the text are together within the same <a> element, as recommended in Technique H2: Combining adjacent image and text links for the same resource.

Example 1: Icon + text label where icon adds no further information

In this example, a link that points to the 'Contact us' page has an icon of an envelope and the link text 'Contact us'. In this situation the purpose of the link is expressed within the link text and the icon adds no further meaning. Therefore, the alt attribute must be empty.

<a href="http://www.accessiq.org/contact.html">
    <img src="http://www.accessiq.org/envelope.gif" alt="" />
        Contact us </a>

Example 2: Icon + text label where icon adds additional information

In this example, there is a link to download an annual report. The link text includes a PDF icon. The purpose of the icon is to inform the user that the annual report is a PDF file. Therefore, the alt text should be 'PDF file'.

Note: That it is best practice to include the file type within the link text rather than outside the link text, regardless whether the file type is represented as an icon or as text. By doing this, screen reader users who navigate from link to link within a webpage will know that the link will be to a PDF  (potentially opening the document using an application different to the web browser if that is how their computer is configured) without depending on any surrounding text to convey this.

<a href="http://www.accessiq.org/annualreport.html">
  Download the 2012 Annual Report
  <img src="http://www.accessiq.org/pdficon.gif" alt="PDF file" /></a>  

Example 3: Icon only

In this example, there are several links that allow website visitors to share the webpage via different social media platforms.  The purpose of each link is to share the webpage via the social media platform identified by the icon, such as Facebook, Twitter or Pinterest. An appropriate social media icon represents each link. Therefore, the alt text should be 'Share on Facebook', 'Share on Twitter'; or 'Share on Pinterest'.

<a href="http://www.accessiq.org/sharecode.html">
  <img src="http://www.accessiq.org/facebookicon.gif" alt="Share on Facebook" /></a>
<a href="http://www.accessiq.org/sharecode.html">
  <img src="http://www.accessiq.org/twittericon.gif" alt="Share on Twitter" /></a>
<a href="http://www.accessiq.org/sharecode.html">
  <img src="http://www.accessiq.org/pinteresticon.gif" alt="Share on Pinterest" /></a>

Images of text

It is best practice to style text using CSS rather than use images of text. This is an example of following web standards to ensure clear separation between content and presentation.

The two exceptions to this are:

  1. Where the font size, colour or background of text can be customised by the user to meet their accessibility needs; or
  2. Where the visual presentation of text is essential to the information being conveyed.

Note: The second exception includes logos, where the visual representation of the logo is an essential part of the perception of the brand.

Websites must follow these requirements to satisfy Success Criterion 1.4.5: Images of text to meet Level AA compliance.

In most cases of images of text, the alt text should be the same text that is represented in the image. In cases where the image of text is used as a link, apply the same principles as described in the above section on Icons as links.

Groups of images

When a series of images provide a specific meaning together, but repeating alt text for all of them would impede the web experience for a person using a screen reader, you can apply alt text to one of the images, and leave the alt text empty for the remaining images.

An example of this is a star rating system, where several images are used to represent popularity. To give each image the same alt text would be redundant and uninformative, yet the group as a whole require alt text to convey the meaning intended.

Technique G196 suggests:

Using a text alternative on one item within a group of images that describes all items in the group.

Star rating with five stars where the first four stars are yellow.

Form button images

When an image is used as a button within a form, the alt text must describe the function of the button. In the example below, a search form button uses a magnifying icon as the visual representation for the Search button. The function of the submit button is to search, thus the alt text is 'Search'.

<form action="http://example.com/search" method="post">

  <input type="image" name="submit" src="http://www.accessiq.org/magnifyicon.gif" alt="Search" />

</form> 

This is a good example of a literal description being less effective than a meaningful one. While it might be accurate to describe the image as "a magnifying glass", it would not help the user know what to do, whereas the alt text "Search", does.

As always, and it bears repeating, alt text should convey meaning and function.

Image maps

Image maps allow a single image to contain several links. The links are positioned with HTML to refer to separate portions of an image.

An example might be an image of a map of a country that provides links to specific states or territories by clicking on different parts of the map.

To make this usable via a screen reader, in this example, the image should have a single alt text, such as "map of Australia". The corresponding links, written as area elements within a usemap="" referenced map element should each have appropriate alt text (alt="Tasmania";) and title text (title="click through to Tasmania section").

<map name="states">

<area shape="rect" coords="4,33,76,72" href="http://www.accessiq.org/ACT" alt="ACT">

<area shape="rect" coords="5,78,88,117" href="http://www.accessiq.org/NSW" alt="NSW">

<area shape="rect" coords="5,66,75,140" href="http://www.accessiq.org/QLD" alt="QLD">

<area shape="rect" coords="22,121,75,220" href="http://www.accessiq.org/SA" alt="SA">

<area shape="rect" coords="195,143,59,172" href="http://www.accessiq.org/VIC" alt="VIC">

<area shape="rect" coords="105,143,59,5" href="http://www.accessiq.org/WA" alt="WA">

</map>

Long text descriptions

The alt attribute is intended to be a short text alternative for the image. There will be times when the alt attribute will not suffice and a long text alternative is needed, for example, to make a complex photo with several meaningful elements to it, accessible.

There is no recommendation within WCAG 2.0 about the optimal length for a short text alternative. The general consensus is that a short text alternative should not exceed 100 characters (one–two sentences). There is evidence for this in a draft WCAG 2.0 Technique for short text alternative length that did not get included in the final version of WCAG 2.0. The same metric is also referenced in HTML5: Techniques for providing useful text alternatives (draft).

With these as a guide for short text, in the absence of any more definitive guides, use one of the three long text alternative techniques outlined in WCAG 2.0:

  1. Provide a long text alternative on the same page as the complex image.
  2. Provide a long text alternative on a separate webpage.
  3. Provide a long text alternative using the longdesc attribute.

Long text description on the same page

The first method outlined in Technique G74 involves providing long text description of the image on the same page as the image:

  • Provide alt text that gives a brief description of the image. Include a reference to the location of the long text alternative within the alt text.
  • Provide a long description in text near the image. It does not have to be the very next item.

The link to the long description can be immediately before or after the image as per Technique G73.

This method is used for the Access iQÔ Web Accessibility Infographic. The alt text for the infographic is "Web Accessibility infographic with text description below". Below the infographic is a text representation of the purely graphical image.

Note: The long text alternative includes headings, links and images.

Long text description on a separate page

  • Provide alt text that gives a brief description of the image.
  • Provide a long description in text on a separate webpage.
  • Provide a link to the long description either immediately before or after the image.

Long text description using the longdesc attribute

The third method uses the longdesc attribute to direct users to where further information can be found, typically in the form of a URL.

The disadvantages of using the longdesc attribute are:

  • The long text alternative is only available to screen reader users and hidden to all others using a web browser to view a webpage. People with cognitive impairment can also benefit from long text description and using this method will not let them see it
  • Technique H45 cautions that some older assistive technologies do not support the longdesc attribute. Keep in mind that commercial screen readers are quite expensive and this can prohibit screen reader users from upgrading their products on a regular basis.
  • ISSUE-30: Should HTML 5 include a longdesc attribute for images is still open at the time of writing (January 2013). Therefore, there is no clear indication whether the longdesc attribute will be present in the completed version of HTML5.

Therefore, carefully consider the disadvantages of using the longdesc attribute when other options are available.

Tests and exercises

The alt text should explain when a webpage includes audio or visual content for the purpose of testing the user as providing text alternatives will defeat the point of the test.

For example, if it is intended that users click on an image to play a piece of music they are required to identify, then it would not make sense to put the name of the piece of music in the alt text. In this context it is acceptable to use alt text similar to "Mystery tune number one — click to play and identify". It would be useful to also describe the test in the preceding text on the page to clarify the purpose of the page to users relying on screen readers.

Non-text content primarily intended to create a specific sensory experience

As described earlier, alt text should be used to convey meaning rather than be a straight description of what is represented in an image. Sometimes, an image is so familiar or well known that simply knowing its title is enough to convey the meaning.

In the image accompanying an article about the most famous portraits of all time, it would not help the blind user to have an alt text of 'A painting of a lady by an Italian Renaissance painter', when 'Mona Lisa by Leonardo da Vinci' would be far more meaningful, even to a person who had never seen it.

Technique G100 recommends:

Providing a short text alternative, which is the accepted name or a descriptive name of the non-text content.

This acknowledges the nature of the image as a specific sensory experience. Providing its name will deliver the greatest meaning to the user.

Non-standard solutions

Other situations in which the use of alt text differs from standard solutions:

The final point to keep in mind is that, as a developer, you should do all you can to design and set up content management systems and web templates that consider accessibility issues and as much as possible assist content editors and managers comply with accessibility guidelines.

As described above, the use of text alternatives for non-text content depends on developers supporting content authors with markup in the right places. While it is true that a content person can cause a webpage to be inaccessible and not compliant simply by adding new content that includes images without an alt attribute, it would be less likely if the templates or CMS always included an alt attribute, or made it a required field with a "null value" for any image. You can't make them enter the correct alt text, but if you can ensure they don't ignore it, you'll be doing your bit to enhance accessibility and encourage compliance.