Cookies

We use cookies to ensure that we give you the best experience on our website. You can change your cookie settings at any time. Otherwise, we'll assume you're OK to continue.

Computing and Information Services

Making non-text elements accessible

The only content that can be guaranteed to display in every browser is text. Non-text elements may or may not be displayed, dependent on the browser and display medium.

Therefore, every non-text element needs a text equivalent that can be displayed when the browser cannot display the element.

Web Accessibility Initiative Guidelines

This page explains how to meet:

  • Guideline 1.1: "Provide a text equivalent for every non-text element ..."
  • Guideline 1.2: "Provide redundant text links for each active region of a server-side image map."
  • Guideline 9.1: "Provide client-side image maps instead of server-side image maps except where the regions cannot be defined with an available geometric shape."

Reasons for following these recommendations

Not every browser is capable of displaying every type of non-text content. Sometimes this is because the browser is an old version, or it may be that the element cannot be displayed (for example, an image on a text-only terminal).

If there is no text equivalent for each item of non-text content, then users may not be able to understand the content of the page. Search engines will also be unable to fully index the page.

Following this recommendation will also benefit users on a slow internet connection, who may disable image loading to speed up their browsing. If text alternatives are provided, users in this situation can choose which images to view.

How to provide text equivalents.

The purpose of a 'text equivalent' is to duplicate as far as possible the function of the non-text element in situations where the non-text element is not displayed.

Exact methods of providing 'text equivalents' vary from element to element. The most commonly used non-text element is the image. A text equivalent for images can be provided using the alternative text attribute - <img src="image.gif" mce_src="image.gif" alt="The University has over 12,000 students">. In Dreamweaver, enter this text in the Alt box in the image properties window.

For an image, the 'text equivalent' of an image depends on the content and purpose of the image. Examples of appropriate text equivalents are given below. For more details, Alan Flavell's article on the use of alternative text in images provides a discussion of this, as well as some examples of how badly-chosen alternative text can cause problems.

Photographs, Diagrams, Graphs and similar images

The alternative text should be a replacement for the purpose of the image. Depending on how important the image is, this may not be possible. The following methods can be used to supplement alternative text.

  1. Immediately below the image in the page, place a detailed 'caption' for the image, describing what each part of the image means and why it is relevant and important to the rest of the page.

  2. Use the longdesc attribute of the image to reference a HTML page with a detailed description of the image and its meaning. This attribute should give the relative path to another page. In Dreamweaver, you can specify this attribute by opening the tag editor for the image, and completing the long description field in the Stylesheet/accessibility section.

    Browser support for longdesc is poor except in the most recent browsers. Therefore, an alternative method of accessing this content must be provided. (Yes, this is a text alternative to a text alternative...). Placing a link immediately after the image to the page referenced in the longdesc attribute is probably the best way to do this.

    Some organisations recommend that the link text should just be a single 'D', but it is usually more accessible and usable to use an appropriate short link phrase. This convention has been followed on these pages.

Images of text

The text equivalent of an image of some text is the text itself. However, remember that images of text have large accessibility disadvantages compared to text itself:

  • Images are larger and so take longer to download: "An image takes two thousand words worth of download time." - Jakob Neilsen.
  • Images do not resize automatically with changes in text size, and so can be difficult to read for people with poor eyesight. rare exception: the Opera browser zoom function will resize images, but not particularly well.
  • Images cannot be magnified well. If a magnification program is being used, images will become jagged and possibly even harder to read. Future work on Scalable Vector Graphics images may solve this problem, but current browser support for these images is very limited.

In a few cases, images of text may be appropriate, but usually the same effect can be achieved in a better way.

If the image is primarily used as a link (an icon, or an image map area, for example), then the text equivalent is the text of a link that could replace it. For example, if a 'question mark' icon is used to represent the help page, the alternative text should be 'help' or similar.

If the image is secondarily used as a link, for example a picture of a building that also links to a site about that building, the text equivalent should be the appropriate text equivalent for the primary use.

Decorative and spacer images

Where an image is used solely for layout or for decoration, such as graphical bullets and separators, transparent graphics used to position other items, and other decorative images, the text equivalent is either:

  • The empty string (alt="")
  • A single space (alt=" ")

In Dreamweaver, it is easier to enter a single space as the alternative text. Both possibilities have minor advantages over the other in certain browsers, with the single space perhaps slightly better overall.

For semi-decorative images (almost any photograph of Durham Cathedral, for example), alternative text of "Photograph of Durham Cathedral" could be acceptable. Some sources recommend enclosing this text in square brackets, to increase familiarity for text-mode users and to separate the alternative text from nearby paragraphs. This may have disadvantages in audio media, however.

Image Maps

Image maps have their own special considerations. Where possible (almost always), avoid using a server-side image map. Client-side image maps have large advantages, as it is possible for the user to see where an area of the map will go before clicking on it. You should also avoid any image maps unless there is a need for the area of the link to be non-rectangular, as normal images can be used to achieve this effect.

If you must use an image map (and there are many occasions where one is useful, such as a clickable map of countries), then in a client-side map, all of the map areas must have alternative text attributes (in Dreamweaver, the Alt field in the map area properties). In a server-side map, if possible, all links that can be followed by following the map should appear elsewhere on the page. If it is not possible, there must be some alternative way of accessing the same functionality.

The front page of Multimap.com contains good examples of situations where it is appropriate to use both client-side (the map of Europe) and server-side (the map of Britain) image maps.

Remember that image maps need alternative text as images in addition to any other text equivalents they require.

Checking

The main use of accessibility checkers is to ensure that you do not miss out text equivalents entirely. Ensuring that the text equivalents are useful must be done manually.

Most accessibility checkers will warn if a text equivalent is missing. However, very few attempt to check that the text equivalent is appropriate, and those that do are unreliable, giving both false positives and false negatives.

You must check that text equivalents are appropriate manually. The Alt Text Checker for images will display any images on a page together with their 'alt' attributes and a small amount of context, to allow you to easily check the appropriateness of text equivalents.

Since accessibility checkers cannot determine the possible targets of a server-side image map, they cannot check whether equivalent links are provided. Some accessibility checkers will detect the presence of a server-side image map, but none can determine whether it is accessible.

Some accessibility checkers will warn if an area of a client-side image map does not have alternative text. However, none are able to determine if the alternative text is appropriate.