Monday, January 12, 2009

Making this blog ALT tag friendly

Spot the difference between these two images:

grafitti on wall in Temple Lane, Dublin 2 showing a face in darkened colours peering from a brighter neon coloured doorway

It may not be obvious, but the bottom image now has an ALT tag on it, meaning it's easier for people using screen readers, who have their graphics turned off, who surf the web with a text only browser or who might be on a handheld device.

An ALT tag is a simple bit of code that goes on the end of the image source, which describes what's in the image being shown. The more technical definition is

a HTML tag that provides alternative text when non-textual elements, typically images, cannot be displayed.
As I've said before, I use Picasa for most of the images here, preferring it to the integrated blogger image upload system. To add an image to the blog, what I have to do is copy and paste the code from Picasa to the blog and delete the album hyperlink that comes with it. It's pretty much the same as how I described putting comment buttons on a blogspot blog.

So now, when I have my image code in:
image showing html code for image insert

I just type in
alt="description of what I'm describing"
before the closing > bracket, as highlighted below:

image showing HTML code for image insert with ALT code added in

And that's it! I'll just need to improve my skill at describing what's in a photo. If you have any helpful suggestions, I'd love to hear them. users, rejoice. In your image insert function, you can easily specify the alt text, or caption, as shown below.

image showing image functionality

A huge thank you to Digital Darragh for advising me to do this (albeit ages ago!). I hope it improves the experience of this blog somewhat. I'm getting there...

The grafitti/street art by the way is located in a laneway - Palace Street, perhaps - in Dublin 2. Not sure who the artist is but a lot of stuff down there is worth a look.


  1. Now let me see if I got this.....

    If I post a pic of my pink fleece-lined, elasticated top and bottomed drawers with room for a weeks shopping in each leg, and then add a code nobody will see them????

  2. Darragh, you should seriously consider moving to a hosted WP blog. All that copying and pasting code is a pain in the rear. It's really easy to upload images and add alt tags with the WP interface. In fact, it does it for you, using the name of the image. So you save the images with a descriptive filename and Wordpress then uses the filename as an alt tag. Seriously, I never looked back once I moved from Blogger.

  3. No, not exactly.
    Try moving your mouse over the images that are in this post. You'll notice that one of the images will show a small popup discription. That's known as the alternative description and it's used by different browsers and technologies that don't use graphics. It is an edition. It doesn't replace graphics. It just adds to their effectiveness.

    Furthermore, when a search engine comes against a graphic, it just skips it without caring what it shows. With an ALT tag, it will enhance the search keywords for your site as it now knows about more of the content it shows.

    Good work!

  4. Nice one Darragh fair play. Obviously it makes images more meaningful for people like me. Suppose i'll have to learn how to do it on my own blog now.

    Listening to Rick's new show now by the way.

  5. Just to be a pedant - there's no such thing as an Alt 'tag'. Its an Alt attribute on an IMG tag.

  6. Cool tip thanks - I get quite a bit of traffic from people looking for pics so I guess now I can get a bit more