Skip to main content

Image alt text

Posted in Accessibility and Content

Alt text? “What’s-a-one-of-them”, I hear you cry! Well, it’s someone that every website owner who controls their own content should be aware of. Every time you upload a photo you should also be providing a little snippet of text describing what the picture is.

Isn’t the picture enough? Well, yes, it is for most of us, but accessibility’s everything on the web – what about your sight impaired visitors that are having your page read to them by their screen reader? Your pictures are an important part of your content and as such should be described to those who can’t see them. And don’t forget, it’s not just less-abled amongst us: advancing technology will bring with it things like the ability for your car to read you the details of a website while you drive – your eyes are on the road so it’s all going to be audio! Apple’s Siri has already begun to pave the way for this.

Search engines are also unable to look at a picture so they need some kind of descriptive text so that they know what’s going on. You’ll get brownie points for this as it’s one of the things that search engines use to mark a site is accessibility.

So what does alt text look like?

Have a look at the picture you’re going to upload. Is it a picture of John McSmithson getting into a rowing boat? If so, your alt text should read something like “John McSmithson getting into a rowing boat”. Easy peasy!

I’m sure your picture isn’t our friend John heading out on the lake, but you get the idea :)

Above and beyond the call of duty

Do you feel like going the extra mile? It’s pretty easy to score a few more points with Google, Yahoo, Bing and the rest. Your photo will probably have a filename like ABC0054.jpg. If you find the file before uploading it and rename it to john-mcsmithson-getting-into-a-rowing-boat.jpg you’ll not be doing yourself a disservice.

Part of the grand plan

None of his will guarantee you the number one slot on Google. Far from it. What it will do, first and foremost, is make your site that bit easier to use for non-visual visitors; a happy by-product of that is the extra ticks in boxes from search engines. A small part of your site’s overall search engine optimisation :)

Hire me

If you like what you’ve read and think we’d work well together, I’d love to hear from you.

Contact me now

More resources

Here are a couple more resources for you to enjoy. If that’s not enough, have a look at the full list.

  1. Images as the first thing in a button or link

    If the text of an interactive element like a button or link is preceded with an accessible image, we’ve probably got an accessibility problem.

  2. Alt text for CSS generated content

    There’s an interesting feature in Safari 17.4 that allows content added with CSS to have ‘alt’ text. I’m not sure how I feel about this.