What is alt-text?
Alt-text is short for ‘alternative text’. The ‘alternative’ part is referring to what happens when someone can’t see your image for some reason. This could be because they are visually impaired, there’s a problem with your website, or they have their browser set to not display images for some reason – perhaps to save data.
Why is alt-text important?
It’s obviously less than ideal if people can’t see the images on your website. If that’s their choice, we can use alt-text to explain what they’re missing. If it’s not their choice, we have a responsibility to ensure they can still have a positive experience on our site, especially in terms of delivering our content via accessible means. If someone is blind or partially-sighted and relies on a screen-reader or other assistive tech to consume our content, we should use alt-text to support their experience.
Alt-text for Search Engine Optimisation
In addition, alt-text can be a nice little boost to your Search Engine Optimisation (SEO) strategy, so it’s worth making a little bit of effort to get this right. Search engines can’t ‘see’ images. Well-written alt-text basically describes the images to the search engines, who in turn can use that information to rank your website.
How to write good alt-text descriptions
Poorly written alt-text can be just as bad not providing any alt-text. Once you learn how to write good alt-text, you’ll just do it automatically. The good news is, a few key principles can make you an alt-text master!
1. Be descriptive, but keep it succinct
You’re basically trying to explain what you can see in the image, to someone who can’t see it. As a general guide, aim for around 100 characters or less.
2. No need to describe what you’re describing
The browser already knows it’s supposed to be an image, so don’t start your alt-text with “Photo of…, Image of…, or Picture of…..”
3. Use correct grammar
Oftentimes, when you save an image to your computer, it looks-something-like-this.jpg. Whilst it’s tempting to copy/paste that into the alt-text field, please don’t! The dashes will be read by a screen reader and you can imagine how annoying that gets after a few minutes. Write your alt-text it in a sentence and make sure it’s grammatically correct.
4. Include keywords, but not too many!
As we’ve already covered, there’s an SEO benefit to writing alt-text, so you’ll absolutely want to include keywords in your descriptions where it makes sense to. This is secondary to writing a clear and concise description. Don’t get too carried away.
5. Think about context
Consider which part of your content the image is there to support and how you can further convey this in your alt-text description.
Edge cases
Alt-text in decorative images
Don’t worry about writing alt-text for background images, patterns, page dividers and brand elements that are mostly there to enhance the design. When someone is using a screen-reader, it reads the screen (I know, crazy), so you can imagine how distracting it would be if they had to listen to their computer reading out every single design element!
Text in images
Firstly, we shouldn’t be putting text in images. If search engines can’t see it, and anyone using assistive tech can’t see it, you’re not being inclusive and it’s possible you’re shooting yourself in the foot when it comes to SEO. If you absolutely must, be sure to translate that text into the alt-text.
Functional images
An example of a functional image would be the logo on your site that links users to the home page. In cases like this, it’s best to describe the function of that image, as opposed to the image itself. So instead of “(Company name) Logo”, you might say “(Company name) Home”.
How do you know if you’re doing alt-text right?
A good way to self-check is to read your content out-loud, and include any alt-text for images as you work your way down the page. If it sounds logical and makes good sense, you’re probably writing alt-text well!
Examples of good alt-text
Poor alt-text examples
“Sleeping puppy, puppy dog, teddy bear, dog, jack russell, puppy, jack russell puppy dog”
Why is it bad?
Stuffed with keywords, not descriptive and not all that helpful.
“Close up of a sleeping puppy jack russell who is cuddling his teddy bear wearing a red collar and sleeping on a cream rug. He’s content and happy and has been very spoilt for being a good boy.”
Why is it bad?
Too much information. This level of detail would be best conveyed in your copy. This alt-text makes assumptions and at 193 characters, is too long.
Good alt-text example
“Jack Russell puppy dog sleeping soundly with his teddy bear.”
Why is it good?
It’s a succinct description that easily explains the image. It’s ok to use alt-text to convey emotion of an image too, so you might go a step further with:
“Adorable Jack Russell puppy dog sleeping soundly with his favourite teddy bear.”
(Yes, ‘favourite’ is an assumption, but he looks pretty content to me! 😍)
You’re all set – go forth and write descriptive, helpful alt-text!
I know it’s extra work but in the spirit of inclusive design and considering the potential SEO benefits, it’s definitely worth the effort and once complete, it will only take a few seconds each time you add a new image. You really have nothing to lose!