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.