Web Access Centre

Alt text - Web Access Centre

Summary: All images need alt text that is clear and conveys the equivalent information as the image.

• Rationale
• Techniques
• Testing tips
• Further information
• Website Accessibility Initiative compliance
• Other pages about images

---

Rationale

If you have no eyesight or low vision, images cannot be seen, but by using screen readers or braille displays they can be heard or read. This is made possible by providing alternate text or ALT text as it is referred to. Screen readers and braille displays interpret an image on a page by searching for the image's ALT text, which is read aloud to the user.

For an example of what ALT text is, place your mouse over the RNIB logo image at the top left of the page. The text “RNIB home” is what will be read out to a screen reader user, letting them know that the image is a link to the RNIB homepage.

If ALT text is missing from an image, the screen reader will often read out the image file path or simply say “image” instead. In the case of the “RNIB” image, they would hear “logo_rnib.gif” if there was no ALT. This can be extremely frustrating if there are several images on a page. If images are used as links the site then becomes impossible to navigate and will fail to pass Checkpoint 13.1 of WCAG 1.0 (Web Content Accessibility Guidelines) “Clearly identify the target of each link”.

ALT text is also the text that replaces an image in a text-based browser such as Lynx or in PDA’s (Personal Digital Assistants) and mobile devices that cannot support images.

Good ALT text can help provide context and “look and feel” to a blind user. It is also a good medium for providing audio branding to a site as well as being an important marketing tool, because search engines are also "blind" and can't index image content unless it has a text equivalent.

Overall, images with good ALT text will not only make a site more accessible to blind and partially sighted users but also enhance the accessibility of a page to someone who has dyslexia or learning difficulties. Images are a visual aid and are often easier for some people to follow than text.

Techniques

Categorise your images according to the following list then give the image appropriate ALT text. There are two key things to remember. Firstly, all images must have an ALT attribute, even images that have no meaning or function. Secondly, ALT text must be appropriate to the function of the image and convey the equivalent information.

• Pictures that convey meaning should be given an ALT attribute that conveys a textual equivalent to the meaning of the image. The meaning might be literal but is often contextual. Looking at the image in the context of the page and assessing its purpose will help you decide what ALT text to provide.

The example below shows an image that is judged to be contextual. So the ALT text “Lady having difficulty reading a letter would be used” rather than “Lady reading a letter”.

The code for the above image would be:

<img src="/images/publicwebsite/public_lady.jpg" alt="Lady having difficulty reading a letter"/>

A logo should have ALT text that explains what the logo is and a strap-line if applicable. For example, ALT=”web access centre – design and management” on the logo above our first paragraph at the top of the page does this.

Banner adverts, symbols and icons also need to be given ALT text that will translate the meaning of the symbol or the icon, or give the target page of the banner advert. For example an Adobe Acrobat icon should have the ALT text “PDF” unless it is linked, then it should have the name of the document it links to, and have the text “PDF” included.

We recommend removing the text "image" or "picture of" from ALT text, as a screen reader will identify an image element before it reads the ALT text. However it can sometimes be appropriate to indicate if the image is a photograph or a drawing as this may be part of the meaning. For example in a gallery website it makes sense to make these distinctions.

• Decorative images needn’t be conveyed to a screen reader user. To do this null or empty ALT text should be used which is coded as:

ALT=”” or ALT=” ”

This tells a screen reader, braille display or text-browser to ignore the image altogether. This technique is suitable for images of lines, borders and “window dressing images”.

Occasionally an image of a picture can be given null or empty ALT text. This is where the image is judged as not adding additional information to the content. For example an image of a telephone on a contact us page could be given null or empty ALT text, as it isn’t conveying any more meaning than is already provided by a heading or page title. The benefit of giving it null ALT text is that it will reduce the amount of superfluous information a screen reader user has to listen to on a page.

This technique can also be used if there are multiple examples of the same image on a page or throughout the site. If an image is used repeatedly on a page (for example, an image of a decorative flower), include a descriptive ALT on the first instance of it, then a null ALT on the rest.

The key is to ensure that ALT text is given to images that convey content or bring meaning to a page. Using null ALT text for other images prevents the user experience becoming cluttered with redundant information for a screen reader user.

• Functional images must have ALT text that adequately describes the function of the image. Functional images include buttons, images used as links, buttons and linked icons.

There are some exceptions however. If an image is used as a link and is contained within the same link code as an accompanying piece of text, it can be given null or empty ALT text, since screen readers, braille displays and text-based browsers can identify the target of the link by the text link. This also has the added benefit of reducing the amount of repeated information a screen reader user has to listen to.

For an example look at the “Shopping” link and image at the top of this page. The image has been given null ALT text as it is grouped within the same link as the text “Shopping”, as the code below illustrates:

<a href="http://onlineshop.rnib.org.uk"><img alt="" class="component" src="/xpedio/images/RNIBInternetLook/logo_shop.gif" id="logoShop" />shopping</a>

• Images of text should have ALT text that is the same as the text on the image. Best practice however is to avoid the use of images of text altogether as they become blurred when enlarged by screen magnification software.

If the image is a link this text must clearly indicate the page it is linking to. If the image contains a lot of text then we recommend that it be cut down, making sure that the key information is in the ALT text.

In the example below the image is a link to a free CD Burner upgrade for Dell containing a lot of text. To include it all would be cumbersome for a screen reader user to hear. So we would recommend the ALT text “Free CD burner upgrade with purchase of a Dell home system, offer expires 1/21”.

Overall however images of text should be avoided because somebody with low vision will not be able to scale the text in their browser. In addition to this, text becomes blurred and pixellated when enlarged under screen magnification.

• Layout images, such as “spacer” images are used solely to control the visual layout of the page. These images don't convey information or have any function other than layout. These images should be given null or empty ALT text so that screen readers, braille displays and text-based browsers ignore their presence.

Some sites may still use an asterisk for these images i.e. ALT="*". RNIB previously recommended this when screen readers where unable to pick up on empty or null ALT text. This issue no longer exists, so, as a strong recommendation and not a requirement, we encourage sites to switch to null or empty ALT text.

• Structural images are images that give structural meaning to the content of a page, such as a graphic representation of a bullet or horizontal rule.

ALT text should be a text representation of the purpose of the graphic eg " - ", " * " or "item" for hyphens. If the graphic is not the sole means of indicating structure, ie the list is coded as a list, then null or empty ALT text could be used.

Best practice is to use correct structural HTML coding e.g. code lists as lists; CSS (Cascading Style Sheets) can then be used to display the image (with null ALT text) for visual effect.

• Complex images are images whose full meaning cannot be adequately described in a short phrase or sentence. This may include graphs, charts and maps.

A brief name or description should be given in the ALT text, and a longer description of the content of the image given elsewhere. There are a variety of ways in which this can be achieved. A text description can be given on the same page, or linked to, from the image or the page. The ALT text for the image could then be “Office layout, see description below”. LONGDESC can also be used but note that not all browsers use the "longdesc" attribute. Finally, a "D" link can be used.

We recommend providing a text description on the page itself, as this will be useful for all users and not just those with access technology.

• Image maps are images that have multiple clickable areas, also known as "hotspots". An image is classed as an image map if it has a USEMAP attribute and if the associated MAP element defines more than one clickable area, or if the single clickable area does not cover all of the image.

The image as a whole must have suitable ALT text, eg "UK map" if the image is of a map of the UK. Each clickable area or “hotspot” defined by the AREA elements contained within the MAP element must all have ALT text as well. The ALT text must clearly indicate the nature of the link. So a map of the UK may have 4 clickable areas England, Ireland, Scotland and Wales if the links lead to pages on each country.

• Background images are displayed either through the use of HTML or CSS formatting. As backgrounds it is impossible to provide a text alternative for the content of these images. So it is important to avoid displaying images in this way if they actually do provide information.

If the image is informative, the information must also be either replicated in some other format, or the image should be presented as part of the page content rather than as a background image, where it can be given appropriate ALT text. For example, a logo image is classed as conveying information. If it is presented in the background then the name of the company and any tag line visible on the logo should be made clear elsewhere on the page as text. This could be in the page's TITLE element or as a heading.

• Long ALT text should be kept to a minimum without missing out key information. This usually affects images containing lengthy passages of text, diagrams, charts, graphs and maps.

ALT text should be succinct and to the point of the image. If more than one word is used, keywords should appear at the start of the ALT text in order to make it more distinctive. Typically a screen reader user will only listen to the first word or first few letters, of ALT text in order to gain the meaning. We recommend the maximum length does not exceed a short sentence.

• ASCII text should be used only for it’s original meaning and not for visual effect. Screen readers read text for what it is ,for example, “>” greater than, and “<” less than, are commonly used to represent “next” and “previous” links. Speech and braille output software will read this as “greater than” and “less than”.

In the example below of the image of text the screen reader would read out “Less than previous” and “Next greater than".

For more information on ASCII art, follow the link in Further Information below.

Testing tips

Verify that all images have ALT text and the ALT text is appropriate to the purpose of the image.

• Automated tools - can flag up pages that have images with missing ALT text but cannot assess the appropriateness of ALT text. This needs to be done manually.
  
  
• Accessibility toolbar - Go to Images - Show Images. This will flag up images with missing ALT text, it will also show what the ALT text says, when it has been provided.
  
  
• Browser - Go to Tools - Internet options - Advanced and check "Ignore images on the page". Refresh the page and you will see the alternative text in the spaces where images should be.
  
  
• Screen reader - ALT text will be read out in place of images. If an image has missing ALT text the word "image" or the image file path will be read out.
  
  
• Text-based browser - ALT text replaces images in text-based browsers. If an image has missing ALT text the word "image" or the image file path will appear.

Further information

• ASCII text information in the text section.

Website Accessibility Initiative compliance

• 1.1 Provide a text equivalent for every non-text element (eg via "alt", "longdesc", or in element content). This includes: Images, graphical representations of text (including symbols), image map regions, animations (eg animated GIFs), applets and programmatic objects, ascii art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, video. Priority 1.

For more information on techniques visit the Web Accessibility Initiative techniques page.

Other pages about images

• ALT text
• Animated images
• Image maps
• Images of text

Back to Design & Build

For Web Access Centre updates email webaccess@rnib.org.uk

Content author: webaccess@rnib.org.uk

Last updated: 06/03/2008 15:41