Using Alt Text On Images

Michelle wrote in the comments on the Alt Images post:

Very informative post, Kirsty. One question: is there a place to learn how to create alt tags? The article is clear about what they are, but not how to make them. For those of us who are coding-challenged (or coding-averse, more accurately!), this would be vitally valuable information! Thanks.

No problem, Michelle, I'll have a go at explaining it.

I'll use this image as an example:

Kirsty Hall - Photograph of Broken Cup Handle With Shadows
Kirsty Hall - art, photograph of Broken Cup Handle With Shadows

It's actually pretty simple and you don't need to be scared of it. OK, if you look at the code on your linked image, you'll see something like this:

initial code here="tt-flickr" href="big long string of code"> img class="tt-flickr" src="a different bit long string of code"
width="500" height="305" alt="Broken Handle 01" /> closing code here

Please note, I've replaced the actual code with the helpful words 'big long string of code' and 'initial code' and 'closing code', so that we can see the code instead of just getting the picture again (working out which bits to change took me quite a while, since I'm pretty code impaired myself!) The code may also be in a slightly different order depending on how you've linked the photo. However, the only bit you're interested in is the bit that says, alt="whatever" /> and that will always appear somewhere towards the end.

In this case it originally said alt="Broken Handle 01" />, which was just the title of the image in Flickr. Now Broken Handle 01 isn't very informative, it doesn't give you my name or much about the image, so I changed it to: alt="Kirsty Hall - Photograph of Broken Cup Handle With Shadows" />

Basically, whatever you put inside the two sets of quote marks between the = sign and the /> code will be what Google and the other search engines read as the alternative text for the photo.

If any of you are more technically minded than me and are smacking yourself on the forehead and yelling 'dammit, that's completely wrong', then please do get in touch and I'll change it but I'm 99% sure that this is right.

Making that text searchable and relevant is how your work winds up in Google Images so, you should be adding your name and keywords that are appropriate to that particular work, i.e. 'oil painting', 'landscape', 'sculpture made from pins', etc. Apparently using keywords in alt tags can boost your general Google results too, although I'm not too sure how (magic Google dust sprinkled by the Google fairies maybe?)

Don't restrict yourself to using alt text just as a promotional technique though. You should also make sure that your text is clear and descriptive to make your site or blog more accessible to disabled internet users. Text browsers can't detect images but can detect alt tags and will translate them into spoken text for visually impaired web users. People in countries with poor web access may also have their browsers set to text only and they'll see little written blocks of text instead of your images. Bear this in mind when you're writing your tags. This article has more details on the level of helpful descriptiveness you should be aiming at.

It's a shame that Flickr seems to turn the photo title into the alt text since I can't quite bring myself to label all my Flickr photos with my name (I think it would look way too pushy, weird and tacky). Manually changing the alt text when I post images over here seems to be the only solution right now but I will do a bit of research over on Flickr to see if there's some wonderful way to add hidden alt text to the images without putting it in the titles.

However, if you're uploading images directly into your WordPress site, rather than linking from Flickr, then you can set your alt text very easily. Simply go to the section where you upload images and type the description you want in the box that says 'Title'. I imagine that other blogging software probably has similar options but fortunately changing the code isn't too complicated - just make sure you don't accidentally erase those all important little quote marks.

I hope this makes things a little clearer, Michelle. Oh, and if it makes you feel any better about the subject, I've just this minute realised that I have 235 envelope images to change over at The Diary Project. Someone shoot me now!

EDIT: on the advice of Gyrus, I've changed the term 'alt tag' to 'alt text' as the later is apparently less confusing and more accurate.

Gyrus also points out the following:

Sometimes you might not get the alt text come up when you hover the mouse over an image (it doesn’t come up on Firefox, for instance). Properly, the alt attribute value is “alternative” text, i.e. to use if you can’t see the image (either it’s a text browser, images are turned off, or it’s a speech browser reading the text out). That little “tooltip” that pops up, if it’s there at all, is technically supposed to come from a “title” attribute on the img tag. The title is optional, though. Just thought I’d mention this in case anyone gets confused on Firefox with the alt text not popping up when you mouse over it.

Get more help
If you'd like more information about building your online presence, check out the free resources section.

I am also available for online consulting if you need one-on-one help.


14 thoughts on “Using Alt Text On Images

  1. Gyrus

    A few comments from the resident techie :)

    - Some people might get confused by the phrase "alt tags". If anyone's learned basic HTML, they know a tag is something like <p> or <img />. The extra bits in the tags (like "alt" and "src" in <img src="photo.jpg" alt="my photo" />) are technically called "attributes". A little formal - for informal, "alt text" is probably coolest.

    - Oooh, how did I include that HTML without it trying to just show an image?! Just replace each "<" and ">" with "&lt;" and "&gt;" respectively. "lt" and "gt" stand for "less than" and "greater than", so you can see some sense to it - but anyway, it works :-)

    - Sometimes you might not get the alt text come up when you hover the mouse over an image (it doesn't come up on Firefox, for instance). Properly, the alt attribute value is "alternative" text, i.e. to use if you can't see the image (either it's a text browser, images are turned off, or it's a speech browser reading the text out). That little "tooltip" that pops up, if it's there at all, is technically supposed to come from a "title" attribute on the img tag. The title is optional, though. Just thought I'd mention this in case anyone gets confused on Firefox with the alt text not popping up when you mouse over it.

    - As you mention, in software like WordPress, fields marked "title" or "description" are often the text that ends up as the alt text. A little confusing, but probably fair enough, as it all works out for people who haven't heard of alt text (and might be more confused by having a field there labelled "alt").

    - It's important to remember the other main reason for alt text besides search indexing: accessibility. As mentioned above, blind web users might be using a speech browser, and while of course they'll sadly never be able to fully appreciate purely visual art, it's nice to give them at least a basic idea of what they're missing. Alt text does this. Imagine when writing alt text that you're describing the image to someone who can't see it - because for some people, that's exactly the case. (For the more accomodating and adventurous, there's even a "longdesc" attribute for the img tag that can give the URL of a page that described the image in depth - though it's rarely used except on very accessibility-conscious sites.)

    - Note that making your site good for Google and good for impaired users amounts to the same thing. Good content + good code practices = good search rankings + good accessibility :-)

    [Reply]

    Reply
  2. Gyrus

    A few comments from the resident techie :)

    - Some people might get confused by the phrase "alt tags". If anyone's learned basic HTML, they know a tag is something like <p> or <img />. The extra bits in the tags (like "alt" and "src" in <img src="photo.jpg" alt="my photo" />) are technically called "attributes". A little formal - for informal, "alt text" is probably coolest.

    - Oooh, how did I include that HTML without it trying to just show an image?! Just replace each "<" and ">" with "&lt;" and "&gt;" respectively. "lt" and "gt" stand for "less than" and "greater than", so you can see some sense to it - but anyway, it works :-)

    - Sometimes you might not get the alt text come up when you hover the mouse over an image (it doesn't come up on Firefox, for instance). Properly, the alt attribute value is "alternative" text, i.e. to use if you can't see the image (either it's a text browser, images are turned off, or it's a speech browser reading the text out). That little "tooltip" that pops up, if it's there at all, is technically supposed to come from a "title" attribute on the img tag. The title is optional, though. Just thought I'd mention this in case anyone gets confused on Firefox with the alt text not popping up when you mouse over it.

    - As you mention, in software like WordPress, fields marked "title" or "description" are often the text that ends up as the alt text. A little confusing, but probably fair enough, as it all works out for people who haven't heard of alt text (and might be more confused by having a field there labelled "alt").

    - It's important to remember the other main reason for alt text besides search indexing: accessibility. As mentioned above, blind web users might be using a speech browser, and while of course they'll sadly never be able to fully appreciate purely visual art, it's nice to give them at least a basic idea of what they're missing. Alt text does this. Imagine when writing alt text that you're describing the image to someone who can't see it - because for some people, that's exactly the case. (For the more accomodating and adventurous, there's even a "longdesc" attribute for the img tag that can give the URL of a page that described the image in depth - though it's rarely used except on very accessibility-conscious sites.)

    - Note that making your site good for Google and good for impaired users amounts to the same thing. Good content + good code practices = good search rankings + good accessibility :-)

    [Reply]

    Reply
  3. Kirsty, you are just so cool. i do some web designing and totally forgot about including the alt text on the images until you mentioned it. so thanks for sharing this. and thank you, Gyrus for the additional pointers.

    [Reply]

    Reply
  4. Kirsty, you are just so cool. i do some web designing and totally forgot about including the alt text on the images until you mentioned it. so thanks for sharing this. and thank you, Gyrus for the additional pointers.

    [Reply]

    Reply
  5. Samantha

    I still don't really get it. I think it'll be better if you put the code and let us see it. I learn html by looking at other codes. So, do you think you can put the code onto this page?

    [Reply]

    Reply
  6. Samantha

    I still don't really get it. I think it'll be better if you put the code and let us see it. I learn html by looking at other codes. So, do you think you can put the code onto this page?

    [Reply]

    Reply
  7. Thanks, I always wandered what that was all about. I always skip it when prompted to enter the text when uploading images in my blog or elsewhere. My web developer takes care of all the technical stuff on the website, but now I am blogging I am learning all of these hints and tips every day and I am actually rather enjoying it.

    Thanks again,

    Adelaide

    [Reply]

    Reply
  8. Thanks, I always wandered what that was all about. I always skip it when prompted to enter the text when uploading images in my blog or elsewhere. My web developer takes care of all the technical stuff on the website, but now I am blogging I am learning all of these hints and tips every day and I am actually rather enjoying it.

    Thanks again,

    Adelaide

    [Reply]

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *