By David Saxberg, our former Inclusion Advisor.

David is totally blind and uses a screen reader daily. In his article below, he explains how alt tags can be used to improve accessibility for people with a visual impairment.

A man is holding his phone up to his ear and listening to it. He appears to be using a screen reader.

What are alt tags?

Alt tags are text that is added to an image before it is put on a website. Only software like screen reading software can pick it up – it isn’t always visible on the site. The text describes images for people who are blind or partially sighted and allows everyone to have the same experience on a webpage without feeling like they are missing information.

Why are they necessary?

As a screen-reader user, it’s frustrating to hear the word 'image' be read through my screen reader. I have no way of knowing what is depicted in the image. Does the image have any importance to the related text? Unless the image has an alt tag attached to it, I will not be able to understand it and my experience with a website will be worse as a result.

It is important to have these tags on all images so the screen reading software will read out the alt tag text. This allows screen-reader users clarity and understanding of the image.

How do I write alt tag text?

I offer free professional development sessions which explain accessibility related topics. This is how I explain the process of writing alt text.

Imagine that you are on the phone to your best friend, and they ask you what you can see in front of you. You tell them in a quick and clear way that ‘I can see kids playing with a ball on grass in front of a lake under a cloudy sky’.

After describing that image, the person on the phone should have a good understanding of the scene in front of you. Think of the screen-reader user being your friend on the other end of a phone call. You shouldn’t make the text overly complicated or overly simple. As the developer, it is important to ensure that you are clearly capturing all the relevant elements of the image. You should explain anything that would help the user understand the image and the content on the webpage.

Alt tags are simple to write and easy to incorporate into the design process. By increasing awareness of their importance, we can make sure that screen-reader users have the same experience as people without a visual impairment.