Accessible alt text for images

Adding alternative text (usually referred to as alt text) for images is one of the first principles of web accessibility, but it is also one of the most difficult to properly implement.
Alt text serves several functions:

  • It is read aloud by screen readers in place of images allowing the content and function of the image to be accessible to those with visual or certain cognitive disabilities.
  • It is displayed in place of the image in browsers if the image file is not loaded.
  • It provides a semantic meaning to images which can be ‘understood’ by search engine AIs.

Getting the alt text right often takes some thought, and therefore some time!

Although every image must have an alt attribute, there are certain instances when it is correct to leave the attribute value blank. A simple question you can ask is: “is this image purely decorative or does it convey information?”

It’s often stated that logos specifically, must always have alt text. This is because a logo is often used to discreetly remind the user what the context of the current page is. In the case of all the logos in your Directory results listings however, the logo invariably appears alongside the listing’s title, and therefore SELDOM gives the sighted user any additional information. In other words when there is text adjacent to the image giving you the same information, then alt text could be considered redundant in some cases.
Try and imagine listening to the content of your results page being read aloud by a screen reader. You’ve just heard the current record title: “ABC care services”, so you don’t need to hear the EXACT same thing announced again when the screen reader gets to the logo.

The latest Directory wireframe comes with a new feature which allows all your content editors to now review and edit their own image alt text.
Speak to your account manager in the first instance to enquire about a Directory refresh.

(Further reading: https://www.w3.org/WAI/tutorials/images/decision-tree/)