IT Accessibility Curriculum and Resources

Standard 1:
Text Equivalents for Non-Text Content

NOTE: All <img> and <object> attributes that concern visual alignment and presentation have been deprecated in favor of styles.

• STANDARD 1.1  A text equivalent will be provided for all non-text element(s). Non-text elements will include, but are not limited to, images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets (NOTE: the use of the APPLET element has been deprecated in favor of the OBJECT element) 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.

  • Comment:  This section enumerates some of the elements for which textual equivalents are required.
  • HTML Elements Affected:  <img>, <input>, <area>
  • Code Examples:  
    
    • The img element:
      <img src="picture.jpg" alt="Photo of our co-chairpersons">
    • The input element:
      <label for="news">Want our newsletter?</label>
<input name="newsletter" type="checkbox" checked alt="Checkbox to order e-mail newsletter" id="news">¹

    • The area element:
      <map name="map1">

      <area href="guide.html"
      alt="Access Guide"
      shape="rect"
      coords="0,0,118,28">

      <area href="search.html"
      alt="Search"
      shape="rect"
      coords="184,0,276,28">

      <area href="sitemap.html"
      alt="Site map "
      shape="circle"
      coords="184,200,60">

      <area href="top10.html"
      alt="Top Ten"
      shape="poly"
      coords="276,0,276,28,100,200,50,50,276,0">

      </map>

• STANDARD 1.2  Ensure that equivalents for dynamic content are updated when the dynamic content changes.

  • Comment: In the past, some agencies have created parallel, text-only sites to ensure the same information is available to people who had no access to the visual components of their sites. Occasionally, updating the text-only site would be overlooked when updates were made to the visually-oriented site. This section requires that in situations where two versions of the site exist, the information provided by one must be mirrored in the other.

    Another scenario where this standard will come into play is when pages (for aesthetic reasons) change images periodically to give content a "fresh look." For example, when a page uses rotating photographs, each new iteration of the photographs must include a relevant ALT attribute, if the content of the photographs is meaningful.

  • HTML Elements Affected: N/A

  • Code Example: N/A

• STANDARD 1.3   Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported. If this is not possible, provide equivalent information on an alternative accessible page.

  • Comment:  Scripts, applets, and objects are not only a problem for people with visual impairments. They are also unusable by visitors using passive browsing devices (i.e., those without independent storage or processing capability) such as web-enabled cell phones, Web TV, and other less powerful access methods. Also an issue is the proliferation of sites that download problematic code (e.g., "spyware," "malware," etc.) and the number of people who have disabled scripting support on their browsers as a defense against that malicious software.

    The heart of the matter is that if you use scripts, applets, or objects to publish information or to provide functionality, that same information or functionality must be available to individuals who cannot or choose not to download code from a web site. Let's take an example of a simple JavaScript calculator.

    Our calculator will allow a visitor to enter the value of an item and determine how much the shipping charges and sales tax will be on that item, resulting in the total cost of the transaction.

    If the visitor's browser does not have scripting enabled, how can you deliver that same functionality?

    Luckily, there is the NOSCRIPT element. You can use it provide a conditional link to a page with step-by-step instructions on how the visitor can manually calculate the tax and shipping and use those figures to derive a total cost for the item. The NOSCRIPT element does not hide the calculation form, but can provide clear information that JavaScript is required to use the page's functionality, and that if the visitor's browser cannot (or is configured not to) run JavaScript, then the linked page will substitute.

  • HTML Elements Affected:  <script>, <noscript>

  • Code Example:

    <noscript>
If your browser does not support JavaScript (and if you're seeing this message, it probably isn't), you can access a <a href="instructions.html">step-by-step list of instructions</a> for performing the same calculations manually.</p>
</noscript>

    <script type="text/javascript">
. . . Some JavaScript Commands . . .
</script>

    See our script/noscript example pages in the Scripting and Programmatic Elements section.

• STANDARD 1.4   A text equivalent will be provided for all non-text element(s) through the following means: alt or longdesc attributes, or in element content.

  • Comment:  The intent here is that the information conveyed by visual objects (images) also be made available to individuals who cannot process the image, through alternate means. If the image is one whose description can be rendered succinctly (i.e., under 150 characters), then the alt attribute should be employed. If the image is more complicated, then the longdesc attribute would be a better choice.

    However, only the latest versions of screen reading programs support the longdesc element, and browsers do not support it at all. For this reason, you must also include a text link to the description as well.

  • HTML Elements Affected:  

    • alt attribute: <area> (required), <img> (required), <input>
    • longdesc attribute: <img>, <frame>, <iframe>

  • Code Examples (see Standard 1.8 for examples of the longdesc attribute):  

    • Example of alt attribute using the area element:

      <P><object data="campusmap.gif" type="image/gif" usemap="#map1"></P>
<P>This is a aerial view of the campus.</P>
</object>

      <map name="map1">
<area href="academic.html"
      alt="Academic Center"
      shape="rect"
      coords="0,0,118,28">
<area href="gymnasium.html"
      alt="Gymnasium"
      shape="rect"
      coords="184,0,276,28">
<area href="administration.html"
      alt="Administration"
      shape="circle"
      coords="184,200,60">
<area href="cafeteria.html"
      alt="Cafeteria"
      shape="poly"
      coords="276,0,276,28,100,200,50,50,276,0">
</map>

    • Example of alt attribute using imgelement:>

      <img src="../images/cafeteria_interior.jpg" alt="Photo of the student cafeteria">

    • Example of alt attribute using input element

      <label for="fname" accesskey="F"><u>F</u>irst Name*:</label>
<input type="text" tabindex="1" size="20" name="firstname" alt="Enter your first name" id="fname">

• STANDARD 1.5   An alt attribute will convey the same information, in a textual manner, as intended by the image.

  • Comment:  An example of the intent of this standard would be a set of arrows, one pointing left and one pointing right, on the bottom of one in a series of pages. This visual cue would be easily understood by someone sighted. The left arrow would probably be interpreted as "previous;" the right arrow would be interpreted as "next." When adding alt attributes for these images, use the meaning (i.e., previous & next), rather than a description of the image.

  • HTML Elements Affected:  <img>

  • Code Example:  

    <a href="previouspage.html">
         <img src="leftarrow.jpg" alt="Link to previous page">
</a>
<a href="nextpage.html">
         <img src="rightarrow.jpg" alt="Link to next page">
</a>


• STANDARD 1.6   Graphics which are strictly for decoration, such as bullets, will have an alt attribute defined with no value, or with a single space.²

  • Comment:  Screen readers are very literal. If you enter an alt attribute of "spacer" for every transparent gif or decorative widget you use for visual layout, you confront the visitor using a screen reader with a constantly repeated "spacer," "spacer," "spacer," which they will understandably find very annoying.

    A better alternative would be to provide "empty alt attributes" for these visual elements. To create a blank alt attribute, use alt="" or alt=" ".

  • HTML Elements Affected:  <img>

  • Code Example:  <img src="widget.jpg" alt=" ">

• STANDARD 1.7   An alt attribute, within an image element, will not exceed 150 characters.

  • Comment:  The alt attribute is intended to provide a summary of the information conveyed by the image. Some images may require a more in-depth description, depending on the image itself and the context in which it's presented.

    For example, consider two different uses of an image of DaVinci's painting Mona Lisa. In one instance, the image is used in an advertisement for a beauty salon as an icon of feminine beauty. In a second instance, the image is used on a college art department's site to describe DaVinci's painting techniques. In the first instance, an alt attribute would be sufficient (e.g., "painting of a beautiful woman"). In the second instance, a longdesc attribute (and an accompanying text file describing the painting techniques in detail) will be needed.

    In the case of a frame element, the alt attribute would be used if the frame's purpose was simple (e.g., alt="left side navigation frame"); the longdesc attribute would be used if the frame's purpose and relationships to other frames on the page were not so easily described.

  • HTML Elements Affected:  <img>, <frame>, <iframe>

  • Code Example:  
    <img src="monalisa.jpg" alt="Painting of a beautiful woman">
    OR
    <img src="monalisa.jpg" alt="High resolution image of Leonardo DaVinci's Mona Lisa" longdesc="mona_lisa_painting_techniques.html">

• STANDARD 1.8   A longdesc attribute is required within an element if alt text exceeds 150 characters. A descriptive link will also be provided.

  • Comment:  Some visual elements, such as charts or detailed images containing important information cannot be adequately described to the visitor in 150 characters. For such visual elements, use the longdesc attribute to provide a link to a textual description. The value of the longdesc attribute will be the path and filename for the file containing the description.

    Since longdesc support is a relatively new development, you should also provide a text link to the description. Some web developers hide such text links by making the text the same color as the page background. However, we recommend making the text link visual as a service to all of your visitors.

  • HTML Elements Affected:  img, object

  • Code Example:  
    <img src="monalisa.jpg" alt="High resolution image of Leonardo DaVinci's Mona Lisa" longdesc="mona_lisa_painting_techniques.html">

    For a working example of how this all fits together, visit a sample in the Images section of our site.

¹  Example shown is HTML 4.01; if XHTML 1.0, change checked to checked="checked" and close element with a slash before the closing bracket.

²  When this standard was first drafted, the W3C validator required the space in a blank alt attribute or else it would report that the element was missing an alt attribute. The standard has evolved to the point where the validator will accept a blank alt attribute without the space.

Back to NYS Standards Discussion HOME