I talk a lot about accessibility whenever I talk about websites with people, but there are always similar questions when it comes to certain topics. To help with this I thought I’d start writing posts explaining some of these accessibility basics, the first of which is “alt text.”

What is alt text, and why is it important?

Alt text (or alternate text if you want to be fancy) is text that serves as a backup to an image,. Alt text is one quick and easy way that you can make your website more accessible to users with vision impairment, as screen readers (the tools that vision impaired users often use to explore websites) will read the alt text aloud to the user.

To show you an example, here is a street crossing sign that I found in Ballarat a few months ago. Originally this sign would have had icons next to the text to help instruct the pedestrian in using the cross walk. I think you’d agree that since time has faded the images out of existence, this sign is missing half of it’s message.

A crosswalk sign with the images fade, leaving only unhelpful text.

This is a great example of what a website is like for a vision impaired user when there is no alt text on the images. The text is visible, but without the associated graphics the user is only getting half the message. Try to imagine what it would be like if you didn’t know that green meant go and red meant stop, this instruction card with half the instructions missing would just be frustrating and useless to you. Ensuring that your website has alt text for any images that contain relevant information is a must to ensure that your users aren’t frustrated, and can get the most out of your site.

Making sure that images in your website use alt text is Accessibility 101. The web is, after all, a largely visual medium, and images that have missing, incorrect or poor alt text is restricting the chances that vision impaired users can access and use this medium.

If you are a web developer or content manager and want to learn more about alt text, try one of the following links.