Web Access Centre

Images of text - Web Access Centre

Summary: Images of text should be used sparingly, especially for links. Using HTML and formatting with CSS is the best alternative.

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

---

Rationale

People who use screen magnification software view images at many times the size they were designed to be seen. When this happens images can become pixellated and very difficult to read and sometimes make no sense at all.

Other people, who need to adjust browser or computer settings to view text at a readable size lose the ability to make text bigger when it is presented in images. It is important to realise that they will also not be able to change its colour and contrast within their browser, as they would with text.

People with a low vision may use computers with low colour palettes or high contrast settings. This means they can’t display the colours in the image correctly. For this reason actual text should be used. This makes your pages more flexible, customisable and easier to navigate. As an added bonus, search engines cannot index text within an image, so replacing them with text will increase their ability to do so.

Techniques

• CSS formatted text is preferable to images of text. This means that design wise you can have your text looking like an image where as in fact it is HTML markup and therefore accessible.

The image below shows how an image of text looks when it has been enlarged with screen magnification.

• ALT text must be given to each image of text if images of text can not be avoided. The ALT text should be the same as the text of the image. If there is a lot of text consider removing the image entirely and using HTML markup.
  
  
• Provide alternative text links to guarantee that a screen magnification user can access the image link. If images of text, especially links, cannot be avoided provide text only navigation elsewhere on the page. For example, where a global navigation area has to be made up of images, alternative text links should be provided elsewhere, such as at the bottom of the page. If not, then people who adjust their browser settings, or who use screen magnification software, may lose information or the ability to navigate through parts of your site.

Testing tips

Verify that information presented as images of text have accessible alternatives. ALT text must use the same words as are on the image.

• Automated tools - Run the site through an automated testing tool to flag up pages with images that lack an ALT attribute. Manually assess the appropriateness of ALT text where present.
  
  
• Accessibility toolbar – Go to Images - Show Images..
  
  
• Browser – Go to Tools, Internet Options, Advanced, and uncheck "Show images". Refresh the page and manually check for information that is no longer present.
  
  
• Screen reader - Listen to pages read aloud - if the image file path or the word "image" is read out then image lack ALT attributes. Verify appropriateness of ALT text where present.
  
  
• Text browser - A text-based browser such as Lynx can be used to view pages. This will show immediately if ALT text is given to images of text. View pages, if the image file path or word "image" is seen the images lack ALT attributes. Verify the appropriateness of ALT text where present.

Website Accessibility Initiative compliance

• 3.1 When an appropriate markup language exists, use markup rather than images to convey information. Priority 2

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