Why ALT and TITLE Tags Matter

You understand the importance of including colorful, eye-catching images on your blog posts. But do you know why you should go to the extra effort to add alt and title tags, or attributes, to the image tag? These attributes provide important, additional information about your image in plain text format.

The alt attribute gives information about what happens if you click the image, if it’s a hyperlink. It’s purpose is to make web pages with images more accessible to people who have visual impairments. Imagine you have trouble seeing the screen clearly, and you rely on a screen reader program to help you use your PC and navigate the Internet. What would you want it to say, out loud, to let you know that there’s an image and what it is there for? Use the alt tag to describe the purpose, content, and function of the image.

The title attribute creates the “tooltip text,” a little pop-up box containing additional information about the image. Depending on the screen reader program, the title attribute may or may not be read aloud (it usually is, if the alt attribute is not present). You should always use the alt tag; the title tag is optional, but for variety’s sake, should contain slightly different information if both are used.

Here’s the syntax (you’ll have to edit this in HTML; if you use WordPress, click the Text tab):

<img src=”http://<image file name>” alt=”<describe what info the image contains, what happens if you click it>” title=”<tooltip text – description that pops up when you hover a cursor over it>” width=”<pixels>” height=”<pixels>” />

where <everything between angled brackets> is a variable, and <pixels> is a number of pixels designating height and width of the image.

If you use WordPress and you’ve neglected to add alt and title tags in the past, you can quickly “fix” the problem using a plug-in called SEO Image Tags. While not as good as hand-crafted, more meaningful alt tags, this lightweight utility simply ensures that all of your images an alt tag that corresponds to the image file name or the link destination, if the image is a clickable link. This helps both visually challenged readers and search engines.

HollyJahangiri

Holly Jahangiri is the author of Trockle; A Puppy, Not a Guppy; Innocents & Demons; and A New Leaf for Lyle. You can find her books on Amazon at http://amazon.com/author/hollyjahangiri. For more information on her children's books, please visit http://jahangiri.us/books.
Please share this post!

9 thoughts on “Why ALT and TITLE Tags Matter”

    1. Yes, and I realized I’d forgotten to add the info I’d intended to about the plug-in I found, yesterday, to help quickly ensure that images are compliant – if you have a lot of pages where you’ve neglected to take care of that issue. Thanks, Robin!

  1. The advice I’m hearing in the disability community is that a detailed description under the image in the post is considered good practice and also that any audio also needs to be transcribed for those with hearing impairments (which is why I choose not to vlog).
    Emma recently posted…My First Decopatch ProjectsMy Profile

    1. You might ask if the description is preferable to alt and title tags. My understanding was that the alt tag was developed specifically for screen readers like JAWS. I wouldn’t want to inflict three audio copies of the same information on a visually-impaired reader! I’ve done a bad job of it on this blog, up to now. For the most part, I’d say it doesn’t matter much except on the “how to” type posts with screenshots and visual aids. In most cases, the images are just “window dressing” and not essential to understanding the post.

    1. alt = a description of the action if you click the image, what the content of the image is. Primarily for screen reader programs – won’t be seen by people. (Will be read aloud by accessibility applications, and will be read by search engines.)

      title = additional info (could be the same, but that might be boring!); text you want to display if you hover your cursor over the image. (May be read by accessibility applications; will be read by search engines.)

    1. Neeraj, thanks for raising the question and making me take a harder look. The problem appears to be the way the properties are implemented in WordPress. The short answer: Sort of…

      Here’s the deal:

      – Upload an image and enter all the properties in the dialogue.
      – Insert the image into a post.
      – WordPress keeps Alt and Caption, but drops Title and Description. (I think Description is only used in the back end, so you know why you added the image to your Media Library.)

      IF you edit the image in the post, after inserting it, you can edit Alt, Title, and Caption, affecting only that post (and overriding whatever was entered in the Media Library as the default). NOW the Title attribute is added to the HTML, as it should have been in the first place.

      It’s a little backwards, since Alt is meant for accessibility and screen readers (though in fact, both are usually read aloud, so it’s not as critical which is which, I don’t think).

      The main difference is this:

      Alt should describe what happens if you click the image. It should not only describe the contents of the image, but convey, in words, the point of including it (“shows that the second box displays a checkmark, meaning it is selected” – not just “shows the option selection dialog”). This is something that likely only comes up in “how to” type posts.

      Speaking of “newer versions of WordPress,” why did they remove the Title attribute from the hyperlink edit box? (It used to be alt – but then alt used to display the tooltip text, and now doesn’t, but title does.) I want it back!

  2. I have to admit that I use both on my website but none of them on my blogs. Most of the images I use I get from Flickr via a plugin and those things are already loaded so I feel it would be disingenuous to override them. When I put up my personal images I don’t want them coded for some reason… I couldn’t begin to tell you why. 🙂
    Mitch Mitchell recently posted…Bloggers Are Leaders Because…My Profile

Comments are closed.