How to Write Alt Text for Accessibility

Blind and visually impaired people use alternative text (alt text) to understand images, charts and other visual content displayed online. Alt text is a brief description of an image that’s read aloud by screenreader software. It’s important to write alt text that describes the content of the image, and to place it in the HTML code where screenreading programs can find it.

When writing alt text, we have to consider the context, content and even tone of the image so that blind or partially-sighted users can fully understand what is going on in the image and wider content piece.

Three things to keep in mind when writing alt text:

1. The purpose of the image

The purpose of the image is the most important thing to consider when writing alt text. Is the image decorative or functional? In best practice, if the image is decorative, then the alt text can be left blank. If the image is functional, then the alt text should describe the function of the image – for example, it clicks through to another page.

BUT what is the distinction between functional and decorative? Should we be deciding that blind or sight-impaired people don’t need to know about ‘decorative’ things? Doesn’t feel like it to me.

So, what’s the purpose of something decorative? It’s…to delight, right? So, is this image a boring stock picture of a guy in a suit looking at a whiteboard (not delightful, pretty lazy) or is it something we should try to creatively describe in words, to delight?

2. The content of the image

The content of the image is also important to consider when writing alt text. What do the people in the image look like? What are they doing? What is the background of the image? All of these things should be described in the alt text so that blind users can understand what is going on in the image. If the image contains text, that text should be duplicated in the alt text. But please, don’t be boring. ‘A cat in a field’ may be accurate but it’s boring as hell and gives no joy. Try: ‘A tabby cat with white socks sat in a patch of sunshine in a field, loving life.’ It’s about VIBES, not just facts.

3. The context of the image

Finally, the context of the image is also important to consider when writing alt text. Where is the image located on the page? Is it near other images or text that give it relevance or purpose? All of this information should be taken into account when writing alt text so anyone can understand the meaning of the image.

The cool thing about doing all this work is that it challenges you to be WAY more mindful when you’re using images. You may end up thinking, ‘Hmmm – why did I want this rando happy office woman on this page?’

Where you can add alt text to help people with sight issues

Social media

Instagram and Twitter have alt text for images. More and more I see people asking for alt text in comments, so it’s a good thing to get into practice with. You can even set a reminder on Twitter about adding alt text to your images and Instagram seems to be sporadically testing a prompt, too.

A Twitter account that uses alt text impeccably is Whores of Yore, a very funny history feed. The humour of the tweets is matched by the alt text: the tone is totally consistent and a lot of people read the alt text just for the extra content.

Websites

Most website content management systems will give you fields for alt text when you add an image, but if you’re looking for it in code, it’s alt=”Your lovely alt text” in your image code.

Just like any other text, your alt text is part of the general value a search engine perceives of your website. Put some love into it.

Accessibility makes good business sense

Never forget that this stuff supports your website ranking and helps people find your content on many platforms, so it’s worth doing well even before we consider how important accessibility is to our society.