Most people like having images on their website. It helps make the site more interesting and gives the users something nice to look at. And if you’re running an e-commerce site, your images can make or break your business.
And most people know that when you have an image, you need to include attributes for the image. There are enough articles out there that say that, as well as a wide range of accessibility and search engine optimisation checkers that point it out.
But I’ve been noticing something recently that keeps coming up – people will include a title attribute, but not an alt attribute. Or have both saying the same thing.
(Sometimes they’re called “alt tags” or “title tags” as well.)
So I did some reading, dug into the HTML standard, and here are my recommendations for image attributes.
What’s the alt attribute?
The alt attribute is text describing what the image is. If all your images suddenly disappear, the alt attribute can still tell your users what’s going on.
<img src="cat.jpg" alt="A small orange kitten walking through grass">
They’re absolutely vital for screen readers and users who cannot download images. Without an alt attribute, it’s like the image isn’t there. Or, worse, it’s just the file name.
What’s the title attribute?
The title attribute is also text describing what something is, but it’s much more all-encompassing. You can have titles on links, abbreviations, fields, whatever.
<img src="cat.jpg" alt="A small orange kitten walking through grass" title="Photo by AndriyKo Podilnyk on Unsplash">
<p>I used to write a lot of <abbr title="HyperText Markup Language">HTML</abbr>.</p>
It usually shows up as text when you hover over something, like so:
Why does this matter?
Titles are great to have. You can do a lot with titles and it gives a lot of further information that isn’t absolutely necessary to have in the main body of the text.
Alts, however, are vital. Not just for accessibility reasons, but for search engine optimisation as well.
Search engines read alt attributes, not title attributes. They count towards your keyword strategy, your content strategy, and your ranking overall.
What if the image is just decorative and doesn’t mean anything?
Decorative images are great for the look of your site, but if you put an alt attribute in all of them, you’d run of the risk of your site sounding like this:
Drawing of a cat Cat treats
Drawing of a sale sign Sale now on
You can use empty alt attributes to make the images essentially disappear.
<img src="cat-icon.svg" alt="">
How can I make sure I have alt attributes?
If you’re writing your pages yourself, you just need to remember. Every image has an alt attribute. It'll be hard work at first, but you'll get into the swing of things.
If you’re getting your pages from another source, you can run browser auditing tools – Firefox has the Accessibility Inspector, and Chrome has Lighthouse.
Run either against your site, and it will tell you which images are missing alt attributes. Then it’s just a matter of writing up descriptions of your images and making sure they’re put in.
How much detail do I need to go into?
It’s up to you and what the image is. For a lot of them, a simple explanation will do it.
<img src="kitten.jpg" alt="A kitten sitting on a sofa">
If you’re running an e-commerce site, you might want to put in a bit more information, such as brand and product details.
<img src="123456.jpg" alt="150g pack of Kitten Treats cat treats in Tuna flavour">
What you don’t want to do, however, is keyword stuff your alt attributes.
<img src="kitten.jpg" alt="persian cat kitten ragdoll tabby main coon feline kitty" />
Remember – this isn’t just for search engines, this is for screen readers as well. How does the text flow when you read aloud the alt attribute? Does it make sense?
I hope this helps and I hope your alts are all perfect!
Written 22 January 2020 by Kate Bolin, our Marketing Director, originally on the Eco Web Hosting blog.
Cover image by 贝莉儿 DANIST on Unsplash.
Top comments (0)