Seen at The Festival of the Tree

...if you would be happy all your life, plant a garden ~ Chinese proverb

Saturday, 12 November 2011

Using the Alt Attribute With Your Photos

Canal boats at Bristol harbour alt attribute example
Canal Boats at Bristol Harbour

Update March 2012:
Blogger have now added the ability to add the alt attribute directly onto images. Only read on if you'd like to know more about why it's a good thing to use in blogs.


When I wrote about Bristol BlogCamp recently, we had quite a conversation in the Comments on whether using the Alt Attribute for our photos is worth the extra trouble when writing our blog posts.

Colleen and Esther asked for a better explanation than the link to Wikipedia I gave at the time, so I'm giving it a go...

What is the alt attribute?

It's an HTML command which can be used to display some descriptive text when you use your mouse to hover over the image. The author decides what that text should be.

But I'm showing everyone lovely photos on my blog, why should I be bothered with adding some extra text?

There's many different ways people are accessing your blog - lots of browsers, different PCs, laptops, mobile phones etc etc. It's impossible for you to test every combination to ensure your images are displayed properly. Some of those combinations - or circumstances at the time when someone reads your post - can mean they don't see your photo. If you've ever seen an empty white box with a red cross in the top left hand corner when visiting a blog or website, then you've seen it for yourself.

Also, not everyone 'reading' the internet has good eyesight, so they may use special software which reads it to them instead. When the alt attribute is used, the software reads the text provided, so the reader gets a general idea of what's on display.

Then there's search engine crawlers such as the Google bot which use the alt attribute to make 'sense' of what your image is about. They can't 'read' pictures only text, so anything you can provide via the alt attribute may help them to catalogue your post better and give it the best possible standing in search results.


Ooh, so I can use the alt attribute to get more traffic for my blog?

It's best to think about what your real readers need first because the text needs to make sense to them rather than simply thinking about adding extra keywords to help a computer. Besides, Google and the other search engines have their algorithms changed from time to time, so what works for them today might not tomorrow.

Won't adding a caption to my photo take care of things (
as originally asked by Diana at Elephants Eye)?

Only for the instance where your photo can't be displayed. It won't take care of when someone is using web reader software to 'read' your blog or with better search engine cataloguing.

OK, I'll do it! How do I start using this alt attribute thingy then?

Right - bear in mind you don't have to. You need to weigh up the effort of doing it, the amount of images you normally post and the number of readers you have who may benefit. If you're blogging mainly for yourself or have a small readership, you may choose not to follow this best practice unlike website owners who have to. They need to bear in mind their obligations under the Disability Discrimination Act (DDA)* and also typically have many more readers than we do.

I'd still like to have a go, can you give me an example?

The good news is the alt attribute HTML is already included by both the Wordpress and Blogger software (possibly other blog platforms as well) when you load your photo into your blog post, but without any text defined for it.

If yours is a Wordpress blog, all you need to do is add the text you'd like in the Alternate text box on the image details screen which appears after you've uploaded your photo onto your blog.

For Blogger blogs, all you need to do is click on your image in the post edit screen and then click on the Properties option. You'll get a pop up box where you can add a Title as well as the alt attribute information.

NB I haven't been able to prove the text is shown when the image isn't available, but an ex-colleague who has access to a web reader confirmed recently it does work when I set up a test image on another blog.

The W3C tips for webmasters website has extra information on the alt attribute if you're interested and is very readable.

* = I'm currently looking at the DDA (via the W3C Web Accessibility Initiative) in more detail to see if there are any implications from a blogging viewpoint. Whilst bloggers aren't usually obliged to comply as we don't provide a service, if there's some simple measures we can take to improve our blogs readability, then I believe this is a good thing.

10 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. Alt Attribute is genius! I'm going to get in there and add some text tomorrow. I often put captions, but, as you say, when the internet is not cooperating, mouse-over revealed text is fantastic.

    ReplyDelete
  3. VP, This looks cool and helpful but, I have to admit my brain went~foreign language! I will reread it and make my left brain work harder. xogail

    ReplyDelete
  4. I've sent feedback to Blogger/blogspot before, but perhaps if lots more chime in ... Now we can just click Add Caption. I would love to be able to just click ALT, without ploughing thru a lot of 'foreign language HTML'.

    I have a caption, so readers don't need a mouseover, but the first time I read about this was from the point of view of someone visually challenged, for them I would like to do it.

    ReplyDelete
  5. SLR - welcome! Glad you've found this useful

    Gail - I was hoping it wasn't foreign language, but yes the HTML does look like gobbledegook. I couldn't avoid that if I was going to show an example

    EE - so have I. It would be great to have a fill in box like Wordpress does. At least it's halfway there by having the command inserted already which is better than I thought it was when we first started discussing this. We just supply the text.

    ReplyDelete
  6. Where do you learn all this? Fantastic post - really helpful. See you this evening.

    ReplyDelete
  7. Mark - some of it was painfully learnt whilst setting up my first advert. The rest is via my husband (who did a web authoring course when he was Wiltshire Masters Swimming's website editor) and courtesy of googling madly on the subject!

    ReplyDelete
  8. Will have to print this most useful and informative post out and study in further depth VP. Shame that the Blogger method is more complicated than Wordpress's.

    ReplyDelete
  9. Great to see someone post about the alt attribute VP, I was of the opinion that really we should all do it, for all images, because it is so easy to do. Then I saw the blogger "support" for it... Do people who use blogger ever use software like LiveWriter for writing blog posts on their laptop/iPad for later uploading? That has a much nicer interface for adding the alt attribute.

    ReplyDelete
  10. Anna - it is a shame, though it looks like Janet may have added a potential solution :)

    Janet - thanks for the reminder. There was quite a lot of chat amongst Blotanical people about Livewriter a couple of years ago and I know quite a few people were using it then or switched as a result. Definitely worth checking out.

    ReplyDelete
Related Posts Plugin for WordPress, Blogger...