alt attribute for non-text content

(Referring UWEM Test: 1.1_HTML_01)

Test info

Failure cause

Found non-text content with missing text equivalent.

You have used one of the following non-text elements

  • img
  • area
  • input (type='image')
  • applet

without providing an appropriate text equivalent in the alt attribute.

Why this may be a barrier

Non-text content without alternative text may not be perceivable by all users:

  • Some user-agents may not be able to present non-text content. In this case, the provided alternative text is presented.
  • Visually or auditory impaired people use a variety of technologies that are able to render text equivalents in ways that are accessible for them (e.g. speech synthesizers).

WCAG1.0 barrier description
Although some people cannot use images, movies, sounds, applets, etc. directly, they may still use pages that include equivalent information to the visual or auditory content. The equivalent information must serve the same purpose as the visual or auditory content. Thus, a text equivalent for an image of an upward arrow that links to a table of contents could be "Go to table of contents". In some cases, an equivalent should also describe the appearance of visual content (e.g., for complex charts, billboards, or diagrams) …
See http://www.w3.org/TR/WCAG10/#gl-provide-equivalents for more information

Good Example

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 //EN">
<html>
<head><title>Sample: Image with ALT-attribute</title></head>
<body>

<img src="../eGovMon_Logo.gif" alt="eGovMon – eGovernmant Monitor">

</body>
</html>

Solution

Add an attribute alt="SHORT_MEANINGFUL_TEXT_ALTERNATIVE" to the element. For decorative images use an empty alt attribute (alt="").

References

Related WCAG 1.0 Checkpoint

1.1

"Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content). This includes: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ascii art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video." [Priority 1]
WCAG 1.0 Checkpoint 1.1

Referring UWEM Test

1.1_HTML_01

This test is targeted to check that non-text content has a text equivalent.

Related DIFI/norge.no requirements

1.1

Does the web site include alternative text for images (alt attribute)?
norge.no requirement description 1.1

Examples

The alt attribute specifies an alternative, descriptive text for non-text content.

This is needed, if the non-text content can not be displayed (e.g. due to low network capacity, or browsers that do not support the format of the non-text content) or perceived (e.g. for search engines or people with visual impairments).

  • alt attribute for images

    The information contained in images can not be perceived by search engines or people with visual impairments, unless there is an alternative description available.

    Bad example:
    <body>
    The information of the following image can not be perceived by all, bacause there is no alternative description available:
    <img src="images/eGovMonLogo.gif" width="185" height="40"   />
    </body>
    Good example:
    <body>
    The information of the following image is perceivable bacause of the alternative description:
    <img src="images/eGovMonLogo.gif" width="185" height="40" alt="eGovMon - eGovernment Monitor (Logo)" />
    </body>
    Questions, suggestions, objections? Give us feedback!
  • alt attribute for graphical buttons

    Images can be set to be submit buttons for forms. In this case, as with all images, an alternative text has to be specified, to make the information perceivable for all.

    Bad example:
    <body>
    <h1>Subscribe to our newsletter</h1>
    <form action="subscribeNewsletter.php" method="post">
    <label for="email">E-Mail</label>
    <input type="text" name="email" id="email" />
    <input type="image" src="images/subscribeNewsletter.jpg" width="100" height="30"   />
    </form>
    </body>
    Good example:
    <body>
    <h1>Subscribe to our newsletter</h1>
    <form action="subscribeNewsletter.php" method="post">
    <label for="email">E-Mail</label>
    <input type="text" name="email" id="email" />
    <input type="image" src="images/subscribeNewsletter.jpg" width="100" height="30" alt="Subscribe to our Newsletter" />
    </form>
    </body>
    Questions, suggestions, objections? Give us feedback!
  • alt attributes for image maps

    Image maps are used to define clickable areas within images.
    As the visual information of the image-parts is not perceivable for visually impaired users or search engines, it is necessary to add an alternative text to the parts.

    Bad example:
    <body>
    <img src ="solarSystem.jpg" width="400" height="250" alt="Solar System" usemap ="#planetmap" />
     
    <map name="planetmap">
    <area shape="circle" coords="0, 125, 80" href="sun.htm"   />
    <area shape="circle" coords="120, 125, 5" href="mercury.htm"   />
    <area shape="circle" coords="130, 125, 15" href="venus.htm"   />
    <area shape="circle" coords="170, 125, 13" href="earth.htm"   />
    </map>
     
    </body>
    Good example:
    <body>
    <img src ="solarSystem.jpg" width="400" height="250" alt="Solar System" usemap ="#planetmap" />
     
    <map name="planetmap">
    <area shape="circle" coords="0, 125, 80" href="sun.htm" alt="Sun" />
    <area shape="circle" coords="120, 125, 5" href="mercury.htm" alt="Mercury" />
    <area shape="circle" coords="130, 125, 15" href="venus.htm" alt="Venus" />
    <area shape="circle" coords="170, 125, 13" href="earth.htm" alt="Earth" />
    </map>
     
    </body>
    Questions, suggestions, objections? Give us feedback!
Questions, suggestions, objections? Give us feedback!
show exampleshow
hide examplehide