Using alt tags correctly

Alt tags (also known as alt attributes, alt descriptions or alt text) are used by screenreaders to verbally describe the content of an image. This is especially useful for visually impaired users who can’t otherwise make out the detail of an image.

Alt tags in our Content Management System are mandatory fields, preventing images being uploaded without this being filled in.

Not every image requires an alt tag – the exceptions to the rule are decorative images, such as banners and borders.

But the general rule is to include one with every image. Screenreaders have the capability to understand if the property is an image or not. This means you don’t have to start your alt text with ‘image of’, as that will already be read out by the screenreader.

Using the example on the right, an ideal alt tag would be along the lines of ‘£10 and £20 notes on a surface with copper coins and a calculator sat on top of them’.

Another difficulty arises with images that have text overlaid on them. These can be more visually appealing, but can also be less accessible for visually impaired users. Images with text should include the text that is displayed within the alt tag.

If you would like to learn more then check out the Web Content Accessibility Guidelines’ tutorial on using alt tags.