Home > Web Services > Resources > You are here Articles

How to use alt text

The use of alternative text (also known as ‘alt tags’) for pictures, text as graphics, decorative graphics, spacer gifs (e.g. clear.gif), form buttons and graphical links is fundamental to accessibility. All graphics on a page need to be labelled because a blind person using a screen reader has only the information in the alt text to gauge the importance of a particular image.

This is because computers can read text to a blind person via speech or Braille but cannot interpret and describe an image.

Different types of images need to be coded differently for accessibility.

Decorative images

For spacer gifs or decorative images you use a null or empty alt text. This is so screen readers can ignore the image which provides no useful information for a blind Web user.

<img src="spacer.gif" width="450" height="1" alt="">

Logos, pictures or graphics

For logos, pictures or graphics that complement text you add alt text with a terse description of the image. For example, if the Sky.com logo was inserted as a graphic (and not a graphical link), it would be assigned alt text as follows:

<img src="http://static.sky.com/images/skycom/main_skylogo.gif" width="67" height="40" alt="Sky.com" border="0">

Linking images

If the image is a link, you must describe the destination or purpose of the link, not provide a description of the image itself. Text such as “click here for…” is unnecessary in the alt text of a graphical link.

<p>Download Adobe's PDF reader	<a href="http://www.adobe.com/products/acrobat/readstep.html">

	<img height="31"  width="88" src="getacro.gif"
	alt="download  Acrobat Reader"></a></p>

Charts and graphs

If the image is a chart or graph as shown in Fig A below then you must provide a longer description than the "alt" attribute can reasonably display. The "longdesc" attribute was created for this reason. The longdesc is a link to an HTML file that contains a summary of the information the image contains. The HTML can be very basic and unstyled, as only screen reader users currently have access to this content.

Fig A – an example graphic chart which needs a more detailed description

So in the example below, benefitschart.html would contain a detailed text description of the chart.

<img  src="images/upchart1.jpg" width="459" height="502"  longdesc="benefitschart.html" alt="chart of strategic  benefits">

Alt text best practice

Keep alt text concise and brief - avoid verbosity
Be consistent in your use of alt text across images
Do not use empty alt tags on image links as these will either be ignored by screen readers users, or the URL (which often does not make sense) will be read out
For links you do not need to add the phrase ‘click here for’ at the start of the alt text because text readers and screen readers know it is a link; for example a screen reader will read links on a page in a different voice to differentiate them from standard text
You don’t need to add ‘picture of…’ when describing a picture of a person; if they are doing a specific addition such as scoring a goal or running a race add that to the alt text
Try and start the alt text with a keyword – so rather than ‘the Weather’ simply use ‘Weather’; this benefits screen reader users who can bring up all the links on a Web page into a ‘links list’ – hitting ‘W’ will jump them to the first item on the list that starts with ‘W’