What is Alt Text and why does it matter?

What is ‘alt text’?

‘Alt text’ is an extra little bit of information that can be added to media items like images.

It’s there for use by screen readers, which are used by people who have vision problems. When the screen reader comes across an image it will read the alt text, so the more descriptive you can make the alt text the better. It’s particularly important when you have an image that is also a clickable link so that your visually impaired readers know that it’s clickable and where it’s going to take them.

Good alt texts will provide a more engaging experience for people who use screen readers and so will increase the length of time they spend on your site, and their willingness to buy from you.

Why do we need to make our sites better for the visually impaired?

Well first off, because you should!  A better question would be ‘why do you want to exclude a whole sector of the population from accessing your website?’

If you still need convincing, WHO estimates that there are 285 million people worldwide with visual impairments. That’s a lot of people who might want to buy what you’re selling.

And even if you only sell within the uk, current estimates suggest that as many as 1,350,000 UK internet users have problems with their vision. That’s over a million people who need to be able to access your website.

And if you’re still not convinced, correctly used alt texts earn you lots of lovely Google points for your search engine ranking.

How to add alt text to images

To put it on images, go to your media library, edit the image you’re looking for and add your alt text in the ‘Alternative Text’ box:


Note that this will apply the same alt text to everywhere that image is used on your site, so if you need to change it slightly, say for a page where the image is clickable,  you’ll need to add it on just that image.  There are a couple of ways you can do this, depending on whether you’re using a page builder or not.

If you’re using a page builder then you should find that the module or widget has a box where you can enter the Alt Text.  If you’re not, and you’ve embedded an image into your post as I did above, then you need to edit the html of the page. The html for the image above reads <img class=”aligncenter size-medium wp-image-7621″ src=”https://jackdawwebdesign.co.uk/wp-content/uploads/2018/08/how-to-add-alt-text-to-an-image-300×136.jpg” alt=”” width=”300″ height=”136″>.  All you need to do is, just before that final angled bracket add a space and then type alt=”descriptive alt text here“.

It’s as simple as that, but if you have any more questions or would like any help in making your site more accessible to the visually impaired, please just contact me. I’m always happy to help.