Wednesday Oct 24, 2007

Front-End Quiz Part 8, ALT Attributes


For a propane supplier's website, which use of the alt attribute value is best?

  1. <img src="mountains.jpg" alt="mountains.jpg">

    This provides no useful information in cases where the image can't be seen.

  2. <img src="mountains.jpg" alt="mountains.jpg, 400x300, jpeg image">

    This provides no useful information in cases where the image can't be seen, and adds noise to the page's content.

  3. <img src="mountains.jpg" alt="aren't they pretty?">

    Aren't \*what\* pretty? By definition, the user can't see the image if the alt text is showing.

  4. <img src="mountains.jpg" alt="mountain scene">

    If the image were followed by the text "We can deliver propane to your door seven days a week." then the text "mountain scene We can deliver propane to your door seven days a week." would be displayed when the image wasn't present, which would be weird.

  5. <img src="mountains.jpg" alt="a mountain scene, taken March 2004, near Evergreen CO">

    If the image were followed by the text "We can deliver propane to your door seven days a week." then the text "a mountain scene, taken March 2004, near Evergreen CO We can deliver propane to your door seven days a week." would be displayed when the image wasn't present, which would be weird.

  6. <img src="mountains.jpg" alt="We Are Colorado's Best Propane and Natural Gas Supplier.">

    This is good, possibly, depending on context. Alt text doesn't necessarily need to reflect the content of the image! It's truly ALTernative content. If the image were followed by the text "We can deliver propane to your door seven days a week." then the text "We Are Colorado's Best Propane and Natural Gas Supplier. We can deliver propane to your door seven days a week." would be displayed when the image wasn't present, which would be a great use of alt="". However note that context and intent should be taken into account when deciding alt text, and it's certainly not something that's machine-decidable.

  7. <img src="mountains.jpg" alt="">

    This is iffy. Sometimes it might be best to leave the alt attribute blank.

  8. <img src="mountains.jpg"> (no alt attribute)

    This is bad. There should always be an alt attribute, even if blank. This at least makes it explicit that the image adds no meaning to the page.


Tuesday Dec 19, 2006

Designing Web-UI Wireframes? Read This

Sometimes, when wireframes specify the placement of an image on the page, they specify the alt text for that image. First of all, if you do this, kudos for thinking to that level of detail. It makes it easier for people like me, who write the actual code, to know exactly what you want. Plus, alt text is important for accessibility, and thinking of that kind of stuff up front saves headache down the road.

It's been my experience, however, that sometimes when the wireframe designer says "alt text," they actually mean title text, or tooltip text, which is different. Alt text is what appears if and when the image is broken or it's not possible to display the image. Title text is an additional bit of info, typically displayed as a tooltip when the mouse hovers over an active element on the page. For best results, continue to specify alt text, but if you also want tooltip text, then specifically call out "title" or "tooltip" text in your wireframe.

About

My name is Greg Reimer and I'm a web technologist for the Sun.COM web design team.

Search

Categories
Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today