views:

169

answers:

4

What is the benefit to add null alt=""? is it only to pass validation or it has more reason

and how it should be write?

like this, no space

alt=""

or this with one blank space

alt=" "
+4  A: 

To get your XHTML validated. The alt is a required attribute on images.

Adding it empty is however a sign of laziness from programmers (although I admit I also do it for images that are not key to site navigation like little decorative elements and so on).

P.S. If you have decorative elements like shadow components, certain ornaments you can add them not with images but as a CSS background, thus avoiding the need to write an alternative text and keeping your markup clean of non-content stuff.

Developer Art
It's also mandatory for HTML.
Joey
Maybe in a couple of decades the validation will become way more tough and require a non-empty string. This could be the most exciting technology arms race in history.
Daniel Earwicker
I don't believe that it is always the case that it laziness - there are images (spacers, borders, etc) that you really don't want read out as they're mostly just decoration and don't contribute to the content so you have to be able to mark those to be ignored by a reader. Unfortunately this is not something I know anywhere near enough about (yet) so would welcome more comments...
Murph
I disagree that it is lazy. Sometimes it makes no sense to describe the image, it's purely there to create a theme or "language in icons". Say for instance you've got a navigation bar, where each navigation option also has an icon, complementing the text, i.e. "icon of a home" Home. Does an alt with "home icon" sound better in a screen reader than having an empty alt-text, I think not!* With alt-text: "Home icon home"* Empty alt: "Home"
PatrikAkerstrand
@Murph: I agree. Add alternative text for images like shadow components is pointless.
Developer Art
@Mac: It's not only screen readers. If I turn off image rendering in my browser, I also get the alternate text. For users of low bandwidth connections this isn't uncommon.
Joey
Decorative images like shadow components should be inserted through CSS and background-image and its relatives, not through markup. That way you do two good things at once. You keep your design in your stylesheets, and you keep unsemantic code out of your page. Although I do think the "semantics is god"-movement has failed to see the fail that is div and span, and the inherent ambiguity they produce, I still think a div with background-image is better than an img tag for styling.
Tor Valamo
+3  A: 

For images that have no suitable alternate text (i. e. pictures that don't carry any semantics, such as decorative elements), the alt attribute should be empty. Empty meaning empty, not a single space (which is a convention and recommendation but a good one).

The alt attribute must be specified for the IMG and AREA elements. It is optional for the INPUT and APPLET elements.

While alternate text may be very helpful, it must be handled with care. Authors should observe the following guidelines:

  • Do not specify irrelevant alternate text when including images intended to format a page, for instance, alt="red ball" would be inappropriate for an image that adds a red ball for decorating a heading or paragraph. In such cases, the alternate text should be the empty string (""). Authors are in any case advised to avoid using images to format pages; style sheets should be used instead.
  • Do not specify meaningless alternate text (e.g., "dummy text"). Not only will this frustrate users, it will slow down user agents that must convert text to speech or braille output.

Implementors should consult the section on accessibility for information about how to handle cases of omitted alternate text.

HTML 4 specification. Section 13.8 How to specify alternate text

Joey
is null alt only for validation?
metal-gear-solid
The attribute is *mandatory* for `img` elements. So yes, in a way, this is to allow documents to be validated while still ensuring that no useless clutter is introduced for the reader for images without meaning.
Joey
u mean screen reader will bypass null alt?
metal-gear-solid
How would you render or read out an empty string?
Joey
A: 

I'll add this as an answer as well (originally a comment on another answer), since it kind of makes sense to do so.

Images used for styling the page (and therefore has no real "alt" usage) should be inserted through CSS and background-image and its relatives, not through markup. That way you do two good things at once. You keep your design in your stylesheets, and you keep unsemantic code out of your page.

Although I do think the "semantics is god"-movement has failed to see the fail that is div and span, and the inherent ambiguity they produce, I still think a div with background-image is better than an img tag for styling.

Tor Valamo
Don't forget the third case: Images that illustrate content. They don't add any significant meaning, but they are content. (e.g. a chart that shows the data in a table in a visual way, or an image of a person that an article discusses.) These aren't design elements, but they shouldn't have alt text either.
David Dorward
Sure they should. An alt element describes what the image holds, so that those who cannot render images (or use screen readers) know what is there. "12215426.jpg" doesn't tell them anything, while "Obama holding an umbrella" or "Chart detailing the sales over the past year" do tell them stuff. The alt element should be whatever the caption of the image would be, or something simplified if the image actually has a caption.
Tor Valamo
"Obama holding an umbrella" or "Chart detailing the sales over the past year" doesn't tell them *useful* stuff, and makes no sense if you are using a text browser. Alt text is an alternative to, not a description of. You need to make sure the information the image is designed to convey is in the document, you don't need to tell the user everything that they can't see (although occasionally it is useful to, but that is what the `longdesc` attribute is for).
David Dorward
It describes the picture. If the caption would be "Obama had yet another busy day fighting republicans.", that's what the alt would be. If that caption was actually displayed somewhere around the picture however, the alt should be what is on the picture, i.e. "Obama holding an umbrella.", because that is what it is. When else are you going to use an alt? Inline images containing text? Yes. That too, but that's a really limited use for something that is REQUIRED.
Tor Valamo
I agree with David, if you were reading an article about Obama's busy day and the text "Obama holding an umbrella" appeared in the middle somewhere, it would be a confusing distraction while adding nothing to the content.
Nick Higgs
@Nick - As opposed to the caption itself being presented without the picture?
Tor Valamo
@Tor Valamo - Yea, same problem. For a decorational image, I wouldn't include a caption either.
Nick Higgs
“If that caption was actually displayed somewhere around the picture however, the alt should be what is on the picture, i.e. "Obama holding an umbrella.", because that is what it is.” — For me, that doesn’t add anything to the user’s understanding or experience of the page, so you’d be better off putting in a blank alt attribute and not wasting their time. But I’m not a screen-reader user myself.
Paul D. Waite
+3  A: 

Other answers have pointed out the requirements in the standard. Here is a practical example:

Given blank alt text, lynx will render:

Given a missing alt attribute, lynx will render:

filename.jpg

You don't want your content to have irrelevant filenames scattered throughout.

David Dorward
and which method is correct to add null alt? and how screen will behave with your example
metal-gear-solid
The use of a space is, IIRC, to avoid bugs in some older software. Screen readers behave differently (depending on which screen reader and how it is configured). Some will tell the user there is an image there, others will skip over it, some will probably let the user get information about the filename.
David Dorward
your suggestion was right. if we use alt=" " then IE gives blank tool-tip on mouse over
metal-gear-solid