Home > Blog > What is Alt Text & How Do You Write it?

what is alt text and how do you write it?

What is Alt Text & How Do You Write it?

We’ve all found ourselves on a webpage with no images and felt daunted by the blocks of text without anything to actually illustrate what we’re reading. So, we’ve known for a while about the importance of image use in blogs and across websites.

But, it’s no good just putting any old image onto a page and calling it a day. First of all, it’s worth saying that any image you use should be copyright-free and relevant — but it also needs to be optimised. We previously talked about sizing, file formats, and naming images here, but there’s one last factor to consider: alt text.

What is alt text?

Short for ‘alternative text’, alt text is a description provided for an image or element on a web page. It’s used to convey the meaning and context of a given image to people who are unable to see it — like those with visual impairments, and people using screen readers.

Why is alt text important?

There are three main reasons why alt text should be a part of your digital strategy:

For accessibility

The most significant benefit of using alt text on your website is that it makes your content more accessible. For disabled people who may require a screen reader, this simple feature can make or break their experience of a page and website as a whole.

For SEO

If you took two identical webpages, one that has alt text for its images and one that doesn’t, the former would rank over the latter.

This is because, like the rest of the words on your page, alt text helps search engine crawlers to better interpret your content. Search engines can also then index and rank your image accurately.

And, given that Google prioritises helpful, people-first content, it also places importance on accessibility. The more accessible your site is, the more it will want to rank it.

Lastly, if you want your image to function as a link, then its alt text will essentially work in the same way as anchor text. We talked here about why anchor text optimisation is crucial for SEO!

For user experience

From time to time, all of us can benefit from the inclusion of alt text. In the instance that, for whatever reason, an image doesn’t load properly, you’ll need alt text there to take its place. That way, users can still get a sense of the image, including any important contextual information they need to understand the page fully.

How to write alt text

The foundational belief about alt text shouldn’t be that it’s a chore that needs to be done in as few words and as quickly as possible. After all, that kind of defeats the purpose of its accessibility – of creating a rich page experience for those that need it.

Instead, try to think of alt text as a creative exercise. Without condensing or waffling too much, how can I summarise this image? How can I capture its essence in just the right amount of words?

Alt text character limits

Speaking of ‘the right amount of words’, there’s some debate out there about alt text character limits. Some websites will posit that you can only use 150 characters or less because screen readers can’t read more than that. Others say it should be less than 125 characters.

But it seems telling that Google itself offers no specific rule here other than to avoid “writing excessively long alt text that would be considered spammy”.

There is a reason behind the 125-character guidance (notice we haven’t used the word ‘limit’), though. Generally, you should be able to describe an image in a short sentence or two. If you can’t, it might be a ‘complex image’ – we discuss that later on in this blog!

Alt text best practices

To make your alt text as good as it can be, follow these guidelines:

Don’t use ‘image of’ or ‘picture of’ in alt text – it’s not necessary and screen readers will announce the presence of an image.
Include keywords naturally but keep in mind that the priority is describing the image.
Be descriptive but keep it simple and concise; it doesn’t need to be War and Peace. For example, you don’t need to describe the Facebook logo as ‘a white ‘f’ within a blue square. The ‘f’ is lowercase and in Klavika font.’ Instead, just write ‘the Facebook logo’.
Don’t focus on unnecessary detail. Say you have an image of someone holding a phone and making a search in TikTok. The background is a pink gradient. Describing what’s on the phone is probably more necessary and relevant than the colour of the background. Adding too many details can be annoying for people who just want to get to the crux of an image quickly.

Alt text for decorative images

If images are purely decorative – i.e. they serve no other purpose, like conveying meaning or context – then they should be marked up with empty alt text. If you add null alt text to an image (alt=“”), then a screen reader will ignore it.

This is useful because not every image is always 100% necessary to understanding the page. And if you don’t mark decorative images with null alt text, then screen readers will resort to reading the filenames — a very frustrating experience, particularly if there are lots of them.

Do complex images need alt text?

Sometimes, you’ll find that you need to use images or graphics that are too complex to summarise in a couple of sentences for alt text. This is often the case with graphs, infographics, or otherwise complex imagery.

In these instances, you will need to do two things:

1. Create a simple alt text that summarises the information (e.g. ‘A graph showing monthly site impressions from May to August.’)

2. Create a second, longer description that goes into more detail.

How you go about doing step 2 depends on your needs and site capability — w3.org provides an excellent guide to creating alt text and descriptions for complex images.

How to check if an image has alt text

If you’re doing an audit of your website or of a particular page, you might want to quickly check whether the images used have alt text. There’s a simple way to do this.

1. Right click on the image.
2. Click ‘Inspect’ (or use the shortcut Command-Shift-I)
3. Check the highlighted HTML code for that element to see if there is alt text (marked ‘alt=’)

Additionally, while you’re in the Inspect pane, you can use Command-F to search for ‘alt’ across the whole page.