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" />
If this webpage were viewed without images, then the makeawebsitehub logo image would be replaced with the text:
alt text is used
The alt attribute value (
- may be used by search engines, for example Google image search will use the
alt textin 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.
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 textto 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 textto describe the image to someone with a visual impairment.