Importance of alt text for images

The first in a fortnightly series entitled Website 101, providing advice on website best practice.

What is alt text?

Alt text is an attribute of the HTML img element used to display images on websites and provides a text alternative for the image.

Why add it?

An alt attribute is required to let users know what an image is if they are unable to see it. There are a number of reasons why this could be the case:

  • The user is visually impaired and using a screen reader
  • Images are disabled to save bandwidth
  • The internet connection is too slow to load images
  • The image is unavailable for some reason

Using the alt attribute allows you to convey the communicative meaning of the image in its absence.

What alt text to use?

The W3C (World Wide Web Consortium) whose purpose is to develop standards for the web, state that alt attributes should “use text that fulfills the same function as the image.”

The best alt text is brief, yet descriptive. For example…

Park benches on a tree-lined street in autumn.OK:
<img src="bench.jpg" alt="bench"...>

Better:
<img src="bench.jpg" alt="Park Benches"...>

Best:
<img src="bench.jpg" alt="Park benches on a tree-lined street in autumn" ...>

If the image is a link, for example in your navigation or for calls to action, describe the link destination i.e “Get in touch”. For images used for decoration rather than information, add an empty attribute i.e. alt=””.

Tools to check your website

WAVE web accessibility evaluation tool
WAVE Web Accessibility Tool
Enter your URL to bring up a detailed report of the structure of your website; images without alt text will appear as errors in the left-hand sidebar as well as being highlighted on the page.

Feed The Bot SEO overview tool
Feed The Bot SEO overview tool
This provides a comprehensive overview of a host of features. You will need to scroll down the results page to find a grid of images – a red cross indicates those without alt text.

Actually adding the alt text

As already explained, the alt attribute is part of the HTML img element and can, therefore be added to a web page’s HTML markup wherever an image appears. However, how you have access to this markup will vary from business to business, website to website, depending largely on how you maintain or update it. If you are unsure, it is best to speak to the person who built your site and ask for their help and advice.

Alternatively, please get in touch with Wise Genius – we are always happy to help with any website-related issues.