Web checklist

Checkpoint 1.1a: Text Alternatives

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.


Rationale

Nongraphical browsers and screen readers cannot identify images to visually impaired users. To communicate the information users need, Web pages should associate alternative text with all images, particularly active images, such as links or buttons. The alternative text should be meaningful and provide a brief description of the image. When images are not active links, use alternative text appropriately. A person who listens to information cannot ignore text as a person viewing the page can ignore an image. If images are not important or if they are redundant, assign empty alternative text to them, so that the assistive technology and nongraphical browsers ignore the image.

Alternative text is useful for people who have visual impairments and for users of text-only browsers, search engines and mobile device browsers.

Required development and unit test techniques


To comply with this checkpoint, you must meet all of the following techniques. These techniques are defined in WCAG 2.0 Level A Success Criterion 1.1.1 (link resides outside of ibm.com).

  1. Short text alternative: Provide a short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content.
  2. Long description: If the short description is not sufficient, provide a long description in addition to a short text alternative.
  3. Unimportant images: Code images that are redundant, unimportant, or used for visual effect so that they are ignored by assistive technology.

Note: The examples presented in the techniques are not exhaustive. They are meant to illustrate the spirit of this checkpoint.

General examples

  1. Short text alternative: Provide a short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content.

    To comply with this technique for audio and video content, you must implement one of the following examples.

    General example 1

    Provide a descriptive label that describes the purpose of live audio-only and live video-only content.

    Live video-only: If a Web site contains a scrolling set of sports scores, the object that displays the scores must have a label. The label can be in the form of alternate text or a description located in the surrounding content. An appropriate label could be: "Live scores from Major League Baseball and the National Football League." Similarly, if the live video is a real-time streaming IBM stock quote, the label would say "Live streaming IBM stock price".

    Live audio-only: If there is a live webcast that includes an executive giving a quarterly report and users can tune in to the webcast online, the link to the online webcast should be provided and should be labeled something like "Live audio from the IBM shareholders meeting in Armonk, NY".

    For additional information, refer to the WCAG 2.0 examples of providing a descriptive label for time-based media.

    General example 2

    Provide the accepted name or a descriptive name of the non-text content using one of the HTML or Flash techniques.

    For example, a podcast recording is made available to show on how to install Lotus Notes. An appropriate label could be "Podcast on how to install Lotus Notes."

    Note for iOS platform: Mobile Safari does not support Flash. Therefore, use one of the HTML techniques for content rendered in mobile Safari.

    Required unit tests for general development technique 1

    Perform the following unit tests using the tools and assistive technologies available for technique 1.

    Manually confirm that a descriptive label is provided that identifies the purpose of the non-text content.

  2. Long description: If the short description is not sufficient, provide a long description in addition to a short text alternative.

    To comply with this technique, you must implement one of the following examples.

    General example 3

    Provide a long description for non-text content that serves the same purpose and presents the same information.

    For example, a five-day chart of the Dow Jones Industrial Average shows the high, low and close, as well as the volume for each day. A data table is rendered below the chart containing the same high, low, close and volume information that is presented in the chart.

    General example 4

    Provide a long description in text near the non-text content, with a reference to the location of the long description in the short description.

    For example, a bar chart shows the number of sales of the three most popular cars in Germany. The short text alternative for the chart says "Sales numbers for Germany's three most popular cars. Details in text following the chart."

    Immediately following the chart is a heading titled "Sales details about Germany's three most popular cars". The text under the heading gives the sales numbers for each car and explains why the three cars are so popular.

    General example 5

    Provide a long description in another location with a link to it that is immediately adjacent to the non-text content.

    For example, a bar chart shows the number of sales of the three most popular cars in Germany. The short text alternative for the chart says "Sales numbers for Germany's three most popular cars. A link immediately follows the chart and the link text says "long description of the chart". The link points to a heading at the bottom of the page titled "Sales details about Germany's three most popular cars". The text under the heading gives the sales numbers for each car and explains why the three cars are so popular.

    Required unit tests for general development technique 1

    Manually perform the following unit tests.

  3. Unimportant images: Code images that are redundant, unimportant, or used for visual effect so that they are ignored by assistive technology.

    There are no general examples for implementing this technique. Use the HTML examples as a guide.


HTML examples

  1. Short text alternative: Provide a short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content.

    To comply with this technique, you must implement all of the following examples.

    HTML example 1

    When using images for Go or Submit buttons on forms, equivalent alternative text must be assigned using the alt attribute.

    In this example, the submit button is assigned <input alt="Go" /> to match the text on the buttons.

    <input type="image" name="Go" src="btn_go.gif" alt="Go" />

    Go

    HTML example 2

    For an image and text that link to the same location, combine both of them by placing the image and the text inside the same <a> element.

    <a href="digg.html"> <img src="digg.gif" alt="" /> Digg This </a>

    digg this

    Note that the example above uses null alt text because alt text would be duplicative of the button text.

    HTML example 3

    Equivalent alternative text must be assigned to each image on the Web page. There are a number of different scenarios for implementing the alt attribute on <img> elements. If the image is a photograph of a person, the person's name would be appropriate alternative text.

    HTML example 4

    Provide text alternatives for strings where look-alike glyphs are used in place of letters, such as leetspeak.

    If you are using leetspeak or other look-alike glyph, make the translation available immediately before or after the leetspeak. For example, if the leetspeak h4ck3r5 appears, place the word hackers in the alt text.

    HTML example 5

    ASCII art involves drawing images using the characters from a computer keyboard. For examples, refer to Wikipedia's entry on ASCII art (link resides outside of ibm.com). Although the alt attribute cannot be used for ASCII art, text alternatives can be provided for the image, and they should appear before the ASCII art. Note: Also consider adding a skip link to skip to the end of the ASCII art to enable easier navigation for a screen reader user.

    HTML example 6

    Instead of providing a URL directly on a page, add text that describes the linked page. For example, "please visit the IBM Accessibility, Human Ability and Accessibility Center homepage". When implementing this technique, links to different URLs should have unique link text.

    Required unit tests for HTML development technique 1

    Manually perform the following unit test.

    HTML example 7

    When using emoticons, which are ASCII characters used to form facial expressions and emotions, provide a text alternative that describes the emotion it represents.
    The following code example shows how to provide text alternatives for a smiling face emoticon.

    <abbr title="smile">:)</abbr>

    HTML example 8

    Do not apply a non-null alt attribute to an image with role=presentation.

    The following example shows an image that has a presentation role and incorrectly has a non-null alt attribute:

    <img src="done.png" role="presentation" alt="Done">

    The example can be corrected by either removing the role attribute or providing a NULL alt attribute (e.g., alt="" ).

  2. Long description: If the short description is not sufficient, provide a long description in addition to a short text alternative.

    To comply with this technique, you must implement at least one of the following examples or one of the general examples.

    HTML example 9

    Note: The general examples are preferred over the longdesc attribute to provide a long description since the link specified in the longdesc is not rendered on the Web page by the user agent. In the HTML5 specification, the longdesc attribute was originally deemed obsolete on the element. The longdesc attribute is now proposed to remain in the specification, in an enhanced form. Refer to http://www.w3.org/TR/html-longdesc for the latest updates and implementation in HTML5.

    Use the longdesc attribute to point to a URL that contains a detailed description for a complex image or chart. You must provide alt text, but the long description provides additional important information about the image.

    In the pie chart graphic below, the longdesc attribute provides information about the chart.

    <img src="piechart.gif" longdesc="piechart_desc.html" alt="75% cars and 25% trucks." />

    75% cars and 25% trucks.

    HTML example 10

    Use the body of the HTML5 video element to provide a long description. This example uses a video element to describe a digital camera object on a Web page.

    <video ...> <p>This is a demo of a digital camera. When the user presses the shutter button, the picture is taken. The image is then shown on the 2 inch LCD screen. </p> </video>

    HTML example 11

    Use the body of the HTML5 audio element to provide a long description. This example uses an audio element to describe a digital camera object on a Web page.

    <audio ...> <p>This is a demo of a digital camera. When the user presses the shutter button, the picture is taken. The image is then shown on the 2 inch LCD screen. </p> </audio>

    HTML example 12

    Use the body of the <object> element to provide a long description. This example describes a digital camera object on a Web page.

    <object classid= "http://www.example.com/digitalcamerademo.py"> <p>This is a demo of a digital camera. When the user presses the shutter button, the picture is taken. The image is then shown on the 2 inch LCD screen. </p></object>

    Required unit tests for HTML development technique 2

    Manually perform the following unit tests.

  3. Unimportant images: Code images that are redundant, unimportant, or used for visual effect so that they are ignored by assistive technology.

    To comply with this technique, you must implement the following example.

    HTML example 11

    If the image is redundant, unimportant, or used for visual effect, null alternative text should be assigned. When null alt text is used, assistive technology ignores the image.

    This example uses the spacer image for layout and does not add meaning. Null alt text is used to ignore the image.

    <img src="placeholder.gif" alt="" title="" />

    Required unit tests for HTML development technique 3

    Manually perform the following unit tests.


CSS examples

  • Short text alternative: Provide a short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content.

    There are no specific examples for implementing this technique in CSS. Use the HTML examples as a guide.

  • Long description: If the short description is not sufficient, provide a long description in addition to a short text alternative.

    There are no specific examples for implementing this technique in CSS. Use the HTML examples as a guide.

  • Unimportant images: Code images that are redundant, unimportant, or used for visual effect so that they are ignored by assistive technology.

    To comply with this technique, you must implement the following example.

    CSS example 1

    Use CSS to add purely decorative images to enable assistive technologies to turn off or ignore them.

    The following example displays a decorative printer image before the link to print a page. By using CSS for the links, assistive technology can ignore it. The HTML references the CSS class that renders the image.

    CSS:

    .print-link {background:url(images/icon-link-print.gif) 7px 1px no-repeat;}

    HTML:

    For additional information, refer to the WCAG 2.0 examples of using CSS to include decorative images (link resides outside of ibm.com).

    Required unit tests for CSS development technique 3

    Manually perform the following unit tests.

  • ]]>

    Adobe® Flash® examples

    1. Short text alternative: Provide a short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content.

      To comply with this technique, you must implement all of the following examples.

      Flash example 1

      Specify that the Adobe® Flash® module is accessible to screen readers using one of these methods:

      Flash example 2

      Specify a document name and description for the Flash module through the Accessibility Panel or ActionScript.

      Flash example 3

      Using either the Accessibility Panel or ActionScript, provide a name and description for document instances (objects on the stage), including all graphics.

      Flash example 4

      For animations or other changing content, enable screen readers to ignore these elements in the Flash document and provide one text equivalent for the entire animation. When content refreshes automatically, as with animation, a screen reader will read the Web content again when the content changes. To avoid this problem, either deselect the Make Object Accessible setting for the movie, which prevents the screen reader from receiving any accessibility information about the object, or deselect the Make Child Objects Accessible setting, so that the screen reader does not receive new accessibility information each time the screen generates a new picture.

      Flash example 5

      Change static text to dynamic text. Text equivalents are not needed for strictly text elements because Flash automatically exposes all text elements to a screen reader. However, it is recommended to change static text should to dynamic text to ensure a proper reading and tab order.

      Note: Before adding a text equivalent to a graphic, the object must be saved as a symbol in the library. Flash does not support text equivalents for graphic symbols, so you should save the object as a movie symbol or a button.

      Required unit tests for Flash development technique 1

      Refer to the required unit tests for HTML development technique 1.

    2. Long description: If the short description is not sufficient, provide a long description in addition to a short text alternative.

      To comply with this technique, you must implement the following example.

      Flash example 6

      The alt text may not be sufficient to describe a complex image or chart. In that case, provide a long description in addition to the alt text to enable users of assistive technology to receive the same information from the image. The IBM Intranet standards require that all Flash content must have a non-Flash alternative that communicates equivalent information in a different medium (for example, HTML.

      For example, if a Flash object uses animation to demonstrate how to use an ATM, you may need to also include a separate static HTML file(s). In the additional HTML file, all actions in the animation should be described in text format without using Flash technology. You can use additional accessible alternatives in place of static HTML.

      For additional information and examples, refer to WCAG 2.0 Sufficient Technique FLASH11: Providing a longer text description of an object.

      Required unit tests for Flash development technique 2

      Refer to the required unit tests for HTML development technique 2.

    3. Unimportant images: Code images that are redundant, unimportant, or used for visual effect so that they are ignored by assistive technology.

      To comply with this technique, you must implement the following example.

      Flash example 7

      Purely decorative or repetitive clips that do not convey meaningful content should be made invisible to the screen reader by deselecting the Make Object Accessible checkbox in the Flash Accessibility panel.

      For more information, see the Adobe Flash Accessibility Design Guidelines Web site for Animation and Text Equivalents (links resides outside of ibm.com).

      Required unit tests for Flash development technique 3

      Manually perform the following unit test.

      Use a screen reader to confirm that the assistive technology ignores the unimportant image.

    Note for iOS platform: Mobile Safari does not support Java applets, Flash or other third party plugins. Therefore, equivalent content must be presented in a manner that is accessible on iOS devices. Apple recommends using the HTML5 audio and video elements for audio and video content. However, these elements use the browsers' native players, and the controls on the players are not keyboard accessible. Therefore, developers must use the HTML5 audio/video API, JavaScript and CSS to implement keyboard focusable controls. An example implementation of an accessible HTML5 video/audio player can be found in chapter 6 of Pro HTML5 Accessibility: Building an Inclusive Web (link resides outside of ibm.com).


    IBM® Lotus® Domino® examples

    For techniques that have no technology-specific examples, refer to the general or HTML examples for guidance.

    1. Short text alternative: Provide a short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content.

      To comply with this technique, you must implement all of the following examples.

      Screen readers use the text label on a button to describe the purpose of the button similar to the way alt text describes the purpose of an image. If the button label is blank or the label is a graphic or icon, the button is not accessible. When buttons have graphic labels, sighted users can see the label and determine its function. For example, if an action button has a printer icon, a sighted user can determine that the button prints a document. People who are blind use a screen reader to read the button. If the screen reader cannot determine information about the icon, it announces "button" and the user does not know the purpose of the button.

      Domino example 1

      If the button is a hotspot button, use the following steps to provide a text alternative for the button label.

      1. Select the button and open the Button Properties box.
      2. On the Button Info tab, enter a name for the button in the Label field. In the following example, the hotspot button "Start the course" is labeled correctly by using the Label field in the Button properties box.

      Domino example 2

      If the button is an action button, use the following steps to provide a text alternative for the button label:

      1. Select the button and open the Action Properties box.
      2. On the Action Info tab, enter a name for the button in the Name field. If you include an icon, do not select the Only show icon in button bar option.

      Domino example 3

      Provide alternate text for an image map itself in addition to the hotspots:

      1. Select the picture that is being used for the image map and open the Picture Properties box.
      2. Select the Picture Info tab and enter a description of the image map in the Alternate Text field. The alternate text should be concise.

      Required unit tests for Domino development technique 1

      Refer to the required unit tests for HTML development technique 1.

    2. Long description: If the short description is not sufficient, provide a long description in addition to a short text alternative.

      There are no specific examples for implementing this technique with Lotus® Domino®. Use the general and HTML examples as a guide.

    3. Unimportant images: Code images that are redundant, unimportant, or used for visual effect so that they are ignored by assistive technology.

      There are no specific examples for implementing this technique with Domino. Use the general and HTML examples as a guide.


    Recommended development techniques

    Although you do not have to implement the recommended techniques in order to comply with this checkpoint, you should review them because they can improve the accessibility and usability of the application.

    The recommended development techniques for this checkpoint are as follows:

    1. Keep short descriptions brief.
    2. Use the title attribute to enhance alternative text for image links.
    3. Avoid making an image the target of a link.
    4. Use the WAI-ARIA aria-describedby property to enhance alternative text for an image. (link resides outside of ibm.com)

    Recommended development example 1

    Alternative text should be kept short and to the point. Do not use the alt attribute to add additional or verbose information. Users who "listen" to alternative text cannot ignore the text as a user viewing the page can ignore the image. In the document, Techniques For Accessibility Evaluation And Repair Tools (link resides outside of ibm.com), the Evaluation and Repair Tools Working Group of the W3C Web Accessibility Initiative recommends a maximum of 150 characters. They also recommend that the target of a link be no greater than 60 characters.

    Recommended development example 2

    While not required for images of text used as links, you are recommended to use a title attribute to describe the link page. The title can be more descriptive than the alternative text. If provided, graphical browsers display the title text instead of the alternative text when the mousing over the image.

    In the following code sample, the image uses alt="Go" and a title attribute of "Finish shopping and check out" to indicate what will occur when the user selects the image link.

    Go

    <img src="go.gif" alt="Go" title="Finish shopping and check out" />

    Recommended development example 3

    When using an image as the target of a link, you cannot add alt text to the image on the new page. Instead, consider creating a new HTML page and on that page add the image where you can add alt text to the image.

    The following code sample shows the correct way to implement an image as the target of a link. The image of my dog is added to a page. The target of the link is image.html, which contains a picture of my dog.

    <a href="//www.ibm.com/image.html">View the image</a>

    On the image.html page, include the <img> element with appropriate alt text.

    <img src="mydog.gif" alt="Sample image alt text" />

    Recommended development example 4

    When using the embed element, provide alternative content using the noembed element. It is recommended that the noembed element be a child element of embed so it is clear to assistive technologies that there is a text alternative associated with the embed element it describes.

    The following code sample shows the recommended way to implement an embed element using the noembed element as a child element of embed.

    <embed src="../video/mymovie.mp4 " height="60" width="144" autostart="false">
    <noembed>
    <a href="../alternate/transcript mymovie.htm">Transcript
    of "My movie"</a>
    </noembed>
    </embed>

    The next code sample shown here is an alternate way to implement an embed element that is immediately followed by the noembed element.

    <embed src="../video/mymovie.mp4 " height="60" width="144" autostart="false">
    <embed>
    <noembed>
    <a href="../alternate/transcript mymovie.htm">Transcript
    of "My movie"</a>
    </noembed>

    ©2013 IBM Corporation

    Last updated January 1, 2013.

    W3C Recommendation 11 December 2008: http://www.w3.org/TR/WCAG20/ (link resides outside of ibm.com)
    Copyright 1994-2009 W3C (Massachusetts Institute of Technology, European Research Consortium for Informatics and Mathematics, Keio University), All Rights Reserved.