Introduction
In the world of web design and development, there is a thing called 'ALT' or 'Alternative' text. This short post describes what it is, how to use it and, importantly, why to use it.
Most website platforms such as WIX, WordPress and the others make it easy for you to add ALT text, so having an appreciation of why will encourage you to make an effort and do it (correctly)
So, what is ALT text?
A web page will have one or more images in all likeliness: logos, large hero images, and images placed by the page copy to enforce its meaning.
To those that have no visual impairments and can see the image as it's intended, this is fine as it is. However, people with a visual impairment or blindness rely on support from the web browser to read the page out to them.
Screen readers do just that; they read the page's content out loud. So, what happens when a screen reader gets to the end of some text and comes across an image?
ALT text, that's what.
ALT text gets added to the HTML—the code your web browser sees and converts into the web page you see when you browse the internet. Specifically, it gets added to the part of the code that displays the image.
And it is here where we add the ALT text.
How to use ALT text
In the HTML, an image will get added with code that looks something like this:
<img src="/image-of-a-house.jpg">
To add ALT text, simply add an 'alt=' like this:
<img src="/image-of-a-house.jpg" alt="An image of a house">
But most times, you aren't editing code like this; you are using your CMS, e.g. WordPress.
Using WordPress as an example, there is a Media folder in the Admin area where images are stored. Click on any image, and you have a series of options, one of which is to add Alternative (ALT) text.
Other platforms operate similarly.
It is essential to ensure that the ALT text you add has meaning. Remember, the content of the ALT text is what the screen reader will read out to the visitor. If the ALT text is simply some arbitrary text that you allow a WordPress plugin to add, it likely has little value, or worse, a negative value.
In the above examples, when the screen reader gets to the image, it will read out "an image of a house" which has meaning to the person hearing it.
Why use ALT text
There are many reasons to use ALT text, but the primary reason is accessibility. Catering for the needs of those unable to read a page visually is very important.
ALT text will also improve your page's SEO because ALT text is a ranking signal used by most search engines. But that shouldn't be your motive, more a by-product of doing what is right.
A final note
I recently read an article on Think With Google discussing why we should rethink accessibility as customisation. Efforts you make to address your website accessibility for those with a disability will, ultimately, be an improvement for everybody.
Please get in touch if you would like to discuss your website or any of the points discussed.