 |
|
|
|
 |
|
|
|
|
| |
|
|
|
|
|
|
|
|
|
Living Example - Text Equivalent Images |
(a) A text equivalent for every non-text element
shall be provided (e.g., via "alt", "longdesc",
or in element content).
This checkpoint is concerned with graphical
images and photos that are placed on a web page with
the <img> tag.
Every image positioned on a site is done so with
the <img> tag that requires an alt attribute.
For each <img> tag, add an alt attribute that
describes the image or photo.
If the images are decorative only, or if the graphic
or image is used only for layout (e.g. a border within
a table cell), the <img> tag may contain an
empty alt attribute to reduce the amount of needless
narrative those who require assistive technology
will hear. NOTE: some User Agents and assistive technologies
prefer that empty alt attributes contain a blank
space (e.g. <img src="movingborder.gif" alt=" ">),
while others prefer that it contain no space whatsoever
(e.g. <img src="movingborder.gif" alt="">).
However, technical trends seem to indicate that the
latter example will be the accepted standard.
If the image is used as a link, the alt attribute
description should, at the very least, list the same
destination as displayed on the image button itself.
If the button contains a picture or other wordless
icon, the alt attribute must tell exactly where the
link goes. The alt attribute also provides the developer
an opportunity to give more detailed information
about the link's destination.
Is the image related to nearby content? A photo
or graphical image that complements content should
be placed as close to that content as possible.
∑ content ∑
<img src="photo.gif" align="right" alt="This
photo shows∑">
∑ content ∑
In this example, using the <img> tag's align
attribute allows the developer to place a photo to
one side of the page so that its related content
will be
displayed around it. Keep in mind that assistive
technology will read aloud the alt attribute based
on where the <img> tag is positioned within
the source
code, regardless of how the page is rendered by the
user agent (e.g. web browser), so placing the <img> tag
between two sentences of the same paragraph
will satisfy this concern.
If the image contains data or content, The <img> tag's
alt attribute must describe all the information that
is being conveyed in the image. Since most descriptions
of data will exceed one sentence, follow the longdesc
attribute / 'D' link guidelines in the next checkpoint.
Many images, especially action photos or images that
contain data charts or graphs, will require somewhat
lengthy description. Not all assistive technologies
can read aloud alt attributes longer than a few dozen
words. Additionally, not all user agents can accommodate
an alt attribute longer than a few dozen
words.
The 'D' link method: create a link, using the letter
'D' as the hyperlink, that leads to a detailed
description of the information conveyed by the
graphic
image or photo. Make sure that the 'D' link is positioned
next to or directly underneath the image, so that
assistive technology will announce it immediately
after it announces the image.
<img src="salesgraph.gif" alt="sales
chart for the 3rd quarter"> <a href="salesgraph.html" title="Read
detailed information about the sales for the 3rd quarter">D</a>
Including the title attribute within the <a href> tag
will inform both sighted and assistive technology
users of the 'D' link's intent.
The longdesc attribute method: in addition to including
a brief description for a graphic image or photo,
also include the longdesc attribute and a link
to a more detailed description.
<img src="salesgraph.gif" longdesc="salesgraph.html" alt="sales
chart for the 3rd quarter">
NOTE: there is not much---if any---support for the
longdesc attribute by current user agents and assistive
technologies, although that is expected to change.
In fact, it is a good idea to incorporate both
the longdesc attribute and the 'D' link, and requires
minimal work. Of course, be mindful that both the
longdesc attribute and the 'D' link point to the
same file.
Detailed descriptions of the information conveyed
by the graphic image or photo can also be included
as regular page content that is positioned in direct
relation to the animation image.
More Living Examples
The image above, a graphical link to the NASA HomePage, contains no ALT tag whatsoever. A user of assistive technology such as a screen reader or Braille display may only see the path of the image file. This, of course, provides no meaningful information.
This next image link does contain alternative text, but "NASA Meatball" isn't necessarily very meaningful to the user. To a seasoned NASA employee, it is well-known that the NASA logo is referred to as the "Meatball." But to a new visitor to a NASA Web page, who may not already be a NASA fan, an ALT tag of "Meatball" may conjur up a mental image of... well... a meatball, and may leave him/her wondering where the spaghetti is.
This third image of the NASA logo contains alternative text of "NASA Home Page." Now, a user of assistive technology or a text browser will understand that this is a link to the NASA Home Page and not part of dinner.
Decorative images or images used expressly for setting up the spacing on a Web page need not contain alternative text like "Decorative Spacer" or "Red Arrow." These images are not intended to convey any meaningful information to the user, and therefore need only an empty ALT tag.
Sometimes there are images which need a bit more explanation than a sentence or two, in which case an ALT tag may not be sufficient.
One such example is a NASA mission patch. Each patch is unique--designed by the crew of the mission--and has a story behind it. In a case like this, the LONGDESC attribute or a D-link are useful for providing more detailed information about the image. Below is an example of a mission patch containing alternative text stating briefly what the image is, as well as a description of the patch in both LONGDESC and D-link.
D
One drawback to LONGDESC is that its text is brought up in a new browser window. This is rather annoying to users of screen readers or Braille displays, because they may suddenly find themselves in a different window with no obvious way to get back, and once they get back to their original window, they may be dumped back at the top of the page, having lost their place. The D-link, though used only until more assistive technologies catch up to specifications and the use of LONGDESC, is simply a plain HTML file which can easily contain a "Back" button.
|
|
|
|
|
|
|
|
|
|
Curator:
Responsible NASA Official:
Last Updated: March 6, 2009
|
|
|
|
|
|
|
|
|
|
