the alt attribute

Each time that you use <img> or <area>, you should include the alt attribute. An alt attribute is generally a short description of what the <img> or <area> contains or is pertaining to.

Example
<img src="frog.jpg" alt="My pet frog, Snooky.">

Why Should I Care?
It’s an easy bit of code to throw in and yet it’s quite helpful. Here’s why:

  1. Not all web browsers can display images. (Text-only browsers such as lynx and links come to mind.) Image-challenged browsers will instead display the text in your alt attribute.
  2. Not all of your visitors can see images. There are programs designed specifically for helping blind users surf the web. Your pretty images without alt attributes don’t do jack for these users. However, if an alt attribute is specified for an image, said alt attribute can be read aloud, via their special program, to the visually impaired user.
  3. They get you hits. Search engines check your alt attributes. If someone does a search on Google for “chocolate eagle superman” and the only place in the world that such a thing exists is in an image of yours, you’d dang well better have an alt attribute saying “This is a photo of my chocolate eagle superman” so that search engines can find it.
  4. Gotta have ‘em to be valid. If you want your site to be valid HTML 4.01, XHTML 1.0, or XHTML 1.1, you must have alt attributes for images. If you don’t have alt attributes, the W3C validator will give you a message like this: “Line 9, column 34: required attribute “ALT” not specified”.

Basically, if you want to make your web site as widely accessible as possible, you want alt attributes.

Make Them Worthwhile
So many times I’ve gone to a site, viewed the source, and have seen that the owner used alt attributes, but that they were pretty worthless. If you have a big photo of Natalie Portman as part of your layout, don’t just stick in an empty alt attribute so that your site will validate. It’s a cheap way of being able to brag, “Whee, I have valid code!” and it isn’t helping anybody. In your alt attribute, stick a short description, a title, something related to your image or <area>.

Further Reading
More information can be found in the W3C’s Use the alt attribute article as well as in Web Pages That Suck’s Google Is God, Don’t Piss Her Off article.

This entry was posted in Techy and tagged . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>