I was discussing good web practice with a client recently and the subject of Alt Text came up.  He’d seen the tab on the back end of his website and on social channels but he’d never used it.  So let’s take a quick look at what it is and why you should take a minute to add it to your images.  Here’s the tea 👇.

What is Alt Text?

Alt text – short for alternative text – is a brief description of an image and it’s context on your site.  Think of it as an off-screen image caption that isn’t on display.

So why use it?

Well, there are 3 main reasons to use Alt text:

1.     Accessibility

For many with impaired vision, screen readers are essential pieces of kit that allow them to navigate websites and hear, rather than see, what you have to offer. The RNIB estimates that there are 2.2 billion people with sight loss at a level where they would need to use alt text in this way.  That’s an awful lot of users who aren’t getting full access to your content.

Screen readers often have a cut-off of 125 characters for alt text so keep your description below that and make them specific, relevant and give them context.

2.     User experience

Of course we all hope that there are never any loading issues on our sites or channels but sometimes they happen, such as in areas of poor connectivity or when image loading has been disabled.

In these cases, when alt text has been added it is displayed in place of the image and tells the user what they should be seeing. 

3.     SEO

Lastly, alt text can also be used to improve your search engine score and be a way of helping high-intent customers find you and your products. It’s especially important for e-commerce websites, yet an estimated 55% of them are not using it effectively.

We know that search engines crawl content looking for keywords but adding alt text to images helps them understand that the images on the page have a purpose and are not purely decorative. 

Alt text is likely to be used by search engines in combination with computer vision algorithms to help index your site. Most of us can’t game the algorithm but we do get to determine how the images we add text to are viewed, so we should make the most of it.

For example, maybe we’re looking to get ahead with the festive spirit so search for ‘red seasonal jumper.’  

There are pages full of options but let’s take a look at the first one that appears on the top left of the first page.

The full alt text reads:

You can clearly see how my search term matches the image’s alt text and makes it a winner in Google’s listing. You can also see how ‘seasonal jumper’ might be a keyword goal for B2C e-commerce sites in October-December. Using it prominently in the alt text provides an immediate SEO boost and can and should be used widely as long as the keyword is relevant to the image. 

What does good alt text look like?

Good alt text is both descriptive and relevant, so no keyword stuffing!  Using a keyword is fine as long as it makes a natural contribution.  Don’t state the obvious but do include image intent if relevant. 

For example in this advert for Pedigree Dentastix alt text could be:

1. Image of a woman with her dog and a pack of Dentastix with text “fresher breath than yours”.
2. A woman with a dog’s mouth [dog breath]. Pedigree Dentastix give dogs fresher breath than yours.

The first example is shorter but includes unnecessary text “image of”.  Text readers identify images and tell the user that they are describing an image automatically, meaning phrases such as “a picture of” should be avoided.

The second example attempts to help the reader understand the visual humour of the image and provides and shows its relevance.

Since I am using it in a blog about alt text, this is the alt text I have actually used for the image: “Pedigree advert that merges woman’s face with dog’s mouth [dog breath].  An example of context and intent in alt text.”  This provides the context.

What are Escape Characters?

Most of us are not HTML experts so it’s worth knowing that certain characters in everyday use have a different meaning in programming.  Quotation marks, ampersand (&) less than (<), more than (>) and apostrophes all fall into this category and would mean that search engines and screen readers will think that the alt text ends as soon as they appear. 

That means that in our examples above, they would be cut off at

1. Image of a woman with her dog and a pack of Dentastix with text
2. A pack of Dentastix with text

In an ideal world, you would always go into the HTML code and amend it so that it performs and displays correctly.  But let’s be honest, many of us might feel a bit unsure of how to do that.  So here are 2 hacks:

Option 1: Ditch the grammar and remove the speech marks.  This would work perfectly well for a screen reader in both our examples above but doesn’t work as well for image loading issues.

Option 2: Use AI to help you.  The advent of AI has meant that you don’t have to be an expert coder as long as you are clear in your prompt and explain what you are trying to achieve.  Here is how it looks when ChatGPT was used to create HTML for our first example:

Alt text roundup

Better use of alt text results in:

• Higher ranking
• Accessibility for visually impaired users
• Better UX for your customers

Dos

• Make it specific
• Add context
• Keep it under 125 character

Don’ts

• Stuff it with keywords
• Add it to purely decorative images, such as your logo
• Include ‘an image of’ or ‘a picture of’

Want to find out more about this and other topics?