Alt attribute woes

[Adrienne Boswell]

For those who wonder why a non-empty alt attribute is necessary on an
image element:

Today I was filling out a preferences form at Paypal to block certain
types of payments. One of the options was just a small logo that I could
not read because it was too small. Even with magnifying the page, I
still could not make it out. No problem, I thought, I'll just view the
source and take a look at the alt attribute. Guess what? It was blank!

IIRC, alt attributes on logos are usually empty because the company name
is somewhere else in the heading (at least we hope it is), but in this
case, the logo was the name of some bank (still don't know what the heck
the thing is), so the attribute could have even been something like "Acme
Bank".

 

[richard]

For those who wonder why a non-empty alt attribute is necessary on an
image element:

Today I was filling out a preferences form at Paypal to block certain
types of payments. One of the options was just a small logo that I could
not read because it was too small. Even with magnifying the page, I
still could not make it out. No problem, I thought, I'll just view the
source and take a look at the alt attribute. Guess what? It was blank!

IIRC, alt attributes on logos are usually empty because the company name
is somewhere else in the heading (at least we hope it is), but in this
case, the logo was the name of some bank (still don't know what the heck
the thing is), so the attribute could have even been something like "Acme
Bank".

My pet peeve about that is, why do we have it when numerous browsers don't
even recognize it?
The intent was to use it as some kind of identifier for when the image
doesn't show up. Then why does the visitor need to be told what it is when
they can see it?
The only reason ALT has to be there is purely for validation.
Then, we also have, "title" and "name" that can be used to do the same
thing.
I say, make it an option, not a requirement.

Another thing you could try to see the image, is to turn off the styling
and see what shows up then.

 

[Beauregard T. Shagnasty]

My pet peeve about that is, why do we have it when numerous browsers
don't even recognize it?

You didn't notice what Adrianne said? "that I could not read because it
was too small".

Please state which browsers "don't even recognize it." State what
happens in these browsers when the display of images is disabled.

The intent was to use it as some kind of identifier for when the image
doesn't show up. Then why does the visitor need to be told what it is
when they can see it?

What if your visitor is a blind person, using a speaking browser? What
if the visitor has images turned off, or is a search engine?

The only reason ALT has to be there is purely for validation.

...plus all the other reasons, of course.

Then, we also have, "title" and "name" that can be used to do the same
thing.

"title", used with images, is for a tooltip. A "name" is something
completely different. http://www.example.com/home.html#name

I say, make it an option, not a requirement.

You've found something at w3schools?

Another thing you could try to see the image, is to turn off the
styling and see what shows up then.

Please explain, with regard to alt attributes, how HTML is affected when
CSS is "turned off."

 

[Doug Miller]

My pet peeve about that is, why do we have it when numerous browsers don't
even recognize it?

Name one.

The intent was to use it as some kind of identifier for when the image
doesn't show up. Then why does the visitor need to be told what it is when
they can see it?

In case they *can't* see it, of course, as would obviously be the case:
- "when the image doesn't show up" (e.g. broken image file or bad URL)
- if the browser has been configured to not load images
- if the user is blind
- if the image is illegible due to small size or poor resolution (as in the
case under discussion).

The only reason ALT has to be there is purely for validation.

Wrong. See above.

Then, we also have, "title" and "name" that can be used to do the same
thing.

Wrong again. "title" and "name" are not at all the same thing, not even close.

I say, make it an option, not a requirement.

This may come as a surprise to you, but you don't make the rules.

Fortunately.

 

[Jukka K. Korpela]

For those who wonder why a non-empty alt attribute is necessary on an
image element:

I don't think a non-empty alt attribute is necessary on every img element.
And WCAG 2.0 seems to have the same view:

"If non-text content is pure decoration, is used only for visual formatting,
or is not presented to users, then it is implemented in a way that it can be
ignored by assistive technology."
http://www.w3.org/TR/WCAG20/#text-equiv

Today I was filling out a preferences form at Paypal to block certain
types of payments. One of the options was just a small logo that I
could not read because it was too small. Even with magnifying the
page, I still could not make it out. No problem, I thought, I'll
just view the source and take a look at the alt attribute. Guess
what? It was blank!

Well, you could also use some nice browsing enhancement like Firefox Web
Developer Extension, which is very useful in normal browsing, too. In
addition to right-clicking and selecting image information, you could also
select a browsing mode where alt attribute values are shown along with the
images - without needing to peek at the source code (which might not do good
to anyone's mental health).

Anyway, if the alt attribute is present and has empty content, then we
should assume that the proper text replacement for the image is the empty
string, i.e. it can be ignored.

IIRC, alt attributes on logos are usually empty because the company
name is somewhere else in the heading (at least we hope it is),

Right. It's not useful to repeat the information. If the logo is the only
indication of affiliation with a company, then the company name or
abbreviation is suitable alt text, though it might be argued that the
_natural_ way of _saying_ the thing that a logo purports to convey is not
just a name like "Acme", still less something like "Acme logo" but "This is
a page of Acme" or "This page belongs to the Acme site".

but in this case, the logo was the name of some bank (still don't know
what the heck the thing is), so the attribute could have even been
something like "Acme Bank".

Well, here, too, the plain name doesn't really convey an understandable
message. You might say the same about the logo image, but it might be more
understandable than the mere name as text, due to its appearance and
placement.

The alt attribute is not intended to help in interpreting the image, though
we might, as users, try to make such use of it (at our own risk). The
attribute value is normally not meant to be shown when the image is shown.
If an image needs an explanation, the explanation should be given in a
manner that makes it available to all - not necessarily as textual content
on the page, since one might use just a link to the explanation.

I was about to suggest that a title attribute can be used to give
explanations, but that's really not optimal. First, the title attribute
value is normally invisible, with no visual indication of its presence.
Second, it may mess up things; according WCAG 2.0 techniques document, if an
image is ignorable, then it should have, in addition to alt="", either an
empty title attribute or no title attribute at all:
http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/H67

So if an image is just decorational or redundant (e.g., a logo that appears
along with a heading that clearly indicates the affiliation that the logo
expresses visually), it would work against accessibility principles to use
either alt or title attribute for describing the image.

 

[Gus Richter]

The only reason ALT has to be there is purely for validation.
Then, we also have, "title" and "name" that can be used to do the same
thing.

Alt - (compulsory) is to display "Alternate" text, a short description
if the image is not available to be displayed, either by not being
available by the server, a UA without this capability or being
intensionally turned off. May be used as attributes only for img, area
and input elements.

Title - (optional) is for an "Advisory" or "Information" or also known
as a Tool Tip when the mouse pauses over an element. An audio UA may
speak the title information. May be used for most elements.

Here is an example of an image of the Rocky Mountains to be displayed
using both alt and title attributes:
<img src="rockies.jpg" alt="Image of Rocky Mountains" title="A view of
the Rockies from the foothills">
If the image is not available, "Image of Rocky Mountains" will be
displayed in the empty image box. Pausing the mouse over the image will
bring up an Advisory of "A view of the Rockies from the foothills" and
an audio UA will speak it.

Older defective browsers interpret the specifications wrongly. Modern
browsers get it right. Older defective browsers (IE5.5) will disregard
the title attribute and will show "Image of Rocky Mountains" if the
image is missing *and* as an advisory. IE6, if in Quirks Mode, behaves
as IE5.5. IE6, if in Standards Mode, behaves correctly if both alt and
title are provided - if the optional title attribute is not provided,
then it incorrectly uses the alt attribute.

Logic should dictate to use Standards Mode and both attributes to
achieve proper behavior in IE6 and who knows (in this regard) about the
IE6+ flavors with their multiple available Modes. So why take chances.

~~~~~~~~~~~~~~~~~~~~~~

Name - is not related to the above functionality at all. This attribute
was used to identify an image for script and stylesheet usage. We are
advised to use the ID element instead of NAME.

~~~~~~~~~~~~~~~~~~~~~~

For Adrienne:
Sounds like the title attribute was missing and would have been useful
to you?

 

[Adrienne Boswell]

I don't think a non-empty alt attribute is necessary on every img
element. And WCAG 2.0 seems to have the same view:

"If non-text content is pure decoration, is used only for visual
formatting, or is not presented to users, then it is implemented in a
way that it can be ignored by assistive technology."
http://www.w3.org/TR/WCAG20/#text-equiv

Right, if the image is purely for decoration. This image was an icon, it
was meant to show the name of a bank.

Well, you could also use some nice browsing enhancement like Firefox
Web Developer Extension, which is very useful in normal browsing, too.
In addition to right-clicking and selecting image information, you
could also select a browsing mode where alt attribute values are shown
along with the images - without needing to peek at the source code
(which might not do good to anyone's mental health).

I used inspect element. I ain't afraid a no source!

Anyway, if the alt attribute is present and has empty content, then we
should assume that the proper text replacement for the image is the
empty string, i.e. it can be ignored.


Right. It's not useful to repeat the information. If the logo is the
only indication of affiliation with a company, then the company name
or abbreviation is suitable alt text, though it might be argued that
the _natural_ way of _saying_ the thing that a logo purports to convey
is not just a name like "Acme", still less something like "Acme logo"
but "This is a page of Acme" or "This page belongs to the Acme site".


Well, here, too, the plain name doesn't really convey an
understandable message. You might say the same about the logo image,
but it might be more understandable than the mere name as text, due to
its appearance and placement.

The alt attribute is not intended to help in interpreting the image,
though we might, as users, try to make such use of it (at our own
risk). The attribute value is normally not meant to be shown when the
image is shown. If an image needs an explanation, the explanation
should be given in a manner that makes it available to all - not
necessarily as textual content on the page, since one might use just a
link to the explanation.

I was about to suggest that a title attribute can be used to give
explanations, but that's really not optimal. First, the title
attribute value is normally invisible, with no visual indication of
its presence. Second, it may mess up things; according WCAG 2.0
techniques document, if an image is ignorable, then it should have, in
addition to alt="", either an empty title attribute or no title
attribute at all:
http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/H67

So if an image is just decorational or redundant (e.g., a logo that
appears along with a heading that clearly indicates the affiliation
that the logo expresses visually), it would work against accessibility
principles to use either alt or title attribute for describing the
image.

I think in this instance, Paypal was assuming that this was perhaps a
well known logo, just as Visa is a very well known logo. However, banks
are not that well known outside of their native country. For example,
the Wells Fargo (stage coach) logo is very familiar for people in
California, but I'm sure you, Jukka, would not recognize it, nor would
people living in say, New York.

What they should have had was <input type="checkbox" value="y"
name="acmebank"> <img src="acmebank.gif" alt="Acme Bank Logo" title="Acme
Bank"> Block Acme Bank?

 

[dorayme]

If the logo is the only
indication of affiliation with a company, then the company name or
abbreviation is suitable alt text, though it might be argued that the
_natural_ way of _saying_ the thing that a logo purports to convey is not
just a name like "Acme", still less something like "Acme logo" but "This is
a page of Acme" or "This page belongs to the Acme site".

Very hard to say what quite would be the alternative to the
image. "Acme Logo" would satisfy most users.

"Here I am, the visual logo of the Acme Company" might be what
the logo itself would prefer as its replacement if it was a
simple sort of creature.

If it was more boastful it might go on a little more: "See here
how well I represent the Acme Company, look how abstract and
clever and bold and colourful ... well, actually, you poor
schmucks, you will have to do with this text ... boy o boy are
you missing out!"

 

[William Gill]

Very hard to say what quite would be the alternative to the
image. "Acme Logo" would satisfy most users.

"Here I am, the visual logo of the Acme Company" might be what
the logo itself would prefer as its replacement if it was a
simple sort of creature.

If it was more boastful it might go on a little more: "See here
how well I represent the Acme Company, look how abstract and
clever and bold and colourful ... well, actually, you poor
schmucks, you will have to do with this text ... boy o boy are
you missing out!"

This seems to capture the spirit of the law.