What is: ALT text?

The alternative text (alt) attribute provides a text-only description of an image.

Using the image for the Motive logo as an example:

<img src="/img/logo.gif" alt="makeawebsitehub logo" />
\_alt text_/
\__alt attribute__/

\_________________image element______________/

If this webpage were viewed without images, then the makeawebsitehub logo image would be replaced with the text: makeawebsitehub logo.

How alt text is used

The alt attribute value (alt text):

• may be used by search engines, for example Google image search will use the alt text in generating search results;
• may be visible (briefly) before an image is downloaded;
• is displayed in place of an image, if a person has turned-off images, for example if they have a slow internet connection;
• is displayed in place of an image if a person is using a text-only web browser, such as Lynx;
• is ‘spoken’ by screen reader software that is used by the visually impaired.

What ‘problem’ does alt text solve?

Although a person can recognise an image on a webpage as ‘a coffee cup’, ‘my vacation pics’, or ‘a potted palm’; a computer program can only ‘see’ that the webpage is linking to an image file.

For example, let’s say that one of the images mentioned above has the file name: DSC_6400.JPG. The only view that a computer program has of the image is the HTML code, which might look something like this:

<img src="DSC_6400.JPG" />

Based only on the code, the computer program knows that it is dealing with an image <img...>, and might guess that the image is a photo – as JPEG files (using the file extension .JPG), are used in digital cameras – but it can’t tell if this file is the photo of the cup, the West Coast beach, or the plant.

Adding alt text gives a computer program another way of figuring-out what is in the image.

<img src="DSC_6400.JPG" alt="coffee cup" />

Now the computer knows:

• the file is an image;
• the file is probably a photo; and
• the file has been described, by a person, as a ‘coffee cup’.

The more information you provide about an image, the more ways that a computer program is able to help other people find, or use that image. For example:

• a search engine can use the alt text to help a person find your product, service or event;
• a person browsing with images turned-off can choose to load a content image (such as a graph or chart); and
• a screen reader can use the alt text to describe the image to someone with a visual impairment.