[>]

Blog » “alt” vs “title” tags for HTML images

21 Jan 2005

“alt” vs “title” tags for HTML images

Filed under: This website — paulcook @ 1:32 am

Turns out I’ve been using the standards on alternate text for images (<img src=”"> tags) incorrectly my wrong life. But then I’m in good company, as most browsers do too.

The “alt” tag turns out to be ONLY for displaying when the image is not displayed — for the use of blind or low bandwidth people.

The “title” tag is for extra information about the image, typically rendered as a tooltip.

In its usual pioneering way, Firefox does NOT display “alt” tags as tooltips — thus doing its little bit to force webdesigners to use alt text actually as a replacement for the picture — say an alt text of “[Send]” for an image that is a button with the word send on it, as opposed to something to be displayed as a tooltip.

It has, however, “broken” a number of older sites, and caused endless controversy on the Firefox bugzilla site:

Bug 25537 - (Warning 56k) Alt text is not displayed as a tooltip over <img> (image)

Well, it leaves me with a little editing to do to get up to standards level again…



« Previous post in category Next post in category »

8 Comments »

  1. You mean “to get up to standards level [full-stop]“. You were never there to begin with :)

    It’s not a bug - it’s sloppy coding. And likely the bane of many visually impared people, lynx users, cell-phone web browsers and the like. Alt has a specific purpose: it defines what to display when the image can’t be seen. Using it for any other purpose has always been a terrible idea. Who the hell wants a icon that says “send” on it to display a “send” tooltip when you hover over it? Annoying. If you can’y figure out what an image link does without having a tooltip, your site is designed poorly. On the other hand, you definately need an alt tag of “send” for an send icon, so people who can’t see images know what link to click (or you could just use a real send button). That’s why alts are alts and titles are titles.

    All images should have alts (not that any at my site do, but certainly commercial sites should use them for everything), but very few images should have tooltips. Why would you need them? A lot of dynamic crap on web sites these days just makes things harder to use without presenting more information than an analogous static display. But when you do need extra information to be associated with images (maybe photographs or equations or something), for the love of all that is beautiful and ergonomic, use title not alt. You’ll be making your site more accessible and less annoying.

    Comment by MDA — 21 Jan 2005 @ 2:30 pm

  2. Damn - can you fix those em tags for me?

    Comment by MDA — 21 Jan 2005 @ 2:30 pm

  3. hehe - just realized the irony.

    Comment by MDA — 21 Jan 2005 @ 3:55 pm

  4. Hey, I agree entirely that the proper use of the tags is best for blind people. Once one “discovers” the title tag, the distinction is obvious, I think, and useful.

    I do, however, think that there can be a use for tooltips. Consider the navigation buttons at the top of my site. Though I’ve not actually used tooltips, the text below serves the same function. It’s not vital, but makes the site that little bit more navigable. Well, I think so anyway!

    Comment by paulcook — 22 Jan 2005 @ 1:36 pm

  5. I had a rather nice reply written out, but my thumb slipped; I accidentally hit ^A followed by a space, and there is no undo feature. Man am I pissed.

    The gist: Some of the most transient dynamic content on certain websites out there are the most in need of being made more static. The example I gave was those javascript menus on many corporate sites that present submenus on mouseover. You then get subsubmenus on mouseovering a submenu item, and so forth. How many times has your mouse slipped and you’ve been forced to start all over at the top of the hierarchy. This is not just a problem on the web, many layered menus like this have the same problem in seversl OSs out there (including OS X). The solution is simple - keep the menus around on a click (such as your site does).

    Anyway - the point of my now dead comment, and this should not be read as a pointed remark, was to say that dynamic content can be useful, but that more people need to think about whether that content is better served to the user statically (or where on the spectrum of… dynamicity… it should lie).

    Comment by MDA — 22 Jan 2005 @ 2:07 pm

  6. Yes, those menus are annoying! Perhaps the question that needs to be asked is, “How well would my site work with all of the bells and whistles turned off?” I think that the wonders of popups and flash and so on are great to make the site more interesting and to add additional hints, but if the basic use of the site requires them, then there are three problems: (1) It’s hard to use — cf. your menu comments above; and it’s impossible for, say, blind people. (2) It’s less likely to work on all browsers, with all security settings.

    And (3), a meta-point: I think it adds to the danger in people getting caught up in using technology for the sake of it, rather than for any real reason. This makes the interface more confusing, because there’s just too many options.

    Ironically, I think my site actually fails the second point, and maybe the third too: my menus don’t work without JavaScript, at all. And the reason they’re there in that way was because I was wanting to try out some new technology. But in my defense, I have a disclaimer to all this on my homepage.

    Comment by paulcook — 23 Jan 2005 @ 2:47 pm

  7. First of all the main reason for alt and title tag i use em for is SEO. ALTs on images titles on text hyperlinks robot crawlers love it =) alt and title is never a bad idea for anyy site

    Comment by Sean — 14 Jul 2006 @ 6:33 am

  8. Are the addresses allowed in alt tags?

    Comment by Leesha — 1 Mar 2007 @ 9:57 pm

RSS feed for comments on this post. TrackBack URL

Leave a comment

Line and paragraph breaks are automatic. You can use the following HTML tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img src="">