| Non spacer IMG with valid ALT |
|
 |
|
Section 508 1194.22(a);
WAI
/
WCAG
1.0 checkpoint 1.1
|
| |
| |
Issue Description
Images included in this document do not have corresponding
valid textual descriptions. A valid description is a string
value of the ALT attribute that:
-
is not the empty string ("")
-
is not a string with 1 or more spaces (" ")
-
is not the name of the file containing the image
-
does not only say which is the size of the image file
-
is not longer than 150 characters (this is actually only
a suggestion: it is not required by WCAG 1.0 nor 508
standard)
The image appears to have more than a decorative role (i.e.,
it is not a spacer).
|
| |
| |
| How to fix
Add the ALT attribute to the IMG tag. Remember the following points:
-
The description should explain the role of the image on
the page. Imagine listening over the phone to the page
content and the image description
-
If the image is used as the content of a link and you
provide link text too, use a space as the ALT attribute
value of the IMG element. In such a case, link text
should be the alternative description for the image
-
Be brief. Consider that images like logos are repeated on
every page of the site, and people would have to listen
to the same description over and over
-
As a rough guideline, for buttons use the same text shown
by the image
-
ALT descriptions are not interpreted by browsers, and
should not include HTML tags. Embedded tags can only
confuse users and possibly search engines too
-
ALT descriptions that are too long may be truncated by
browsers and increase the time required to download the
page. A good guideline is to use less than 10 words and
64 characters
-
Images used solely for decorative purposes (such as
spacers) should include an empty ALT string ("") so that
screen-readers ignore them. The same is true for images
like bullets
-
BEWARE: The ALT attribute should be the empty string ("")
in cases where the image is already described by
surrounding text
-
BEWARE: All images included in links (including
transparent GIFs) need to have valid ALTs describing the
link destination
|
| |
| |
Issue Explanation
The ALT attribute describes the associated image so that
users without graphics-enabled browsers can still
effectively navigate the page. The advent of hand-held,
text-only browsers makes the use of the ALT descriptions
more important now than ever.
For hidden links (normal A tags whose label is a spacer),
it is important that the ALT attribute of the image exists
and describes the destination of the link. (Hidden links is
a technique you can use to fulfill the 508 rule 1194.22(o)
stating "A method shall be provided that permits users to
skip repetitive navigation links," and the WAI checkpoint
13.6.)
ALT descriptions are displayed before the associated image,
which is helpful when image download and display takes
several seconds.
Adding keywords to the ALT attribute can also improve the
page listing in some search engine.
For images that play only a decorative role in the page
(like spacers and bullets), it is recommended that you define an
empty ALT (i.e.
ALT=""
) so that speaking browsers do not confuse your users to say
things like "*" or ">".
|