A state agency web page must provide a text equivalent for every non-text element.

Rationale

Graphics can be useful and attractive enhancements to a web page. However, when graphics are used, text equivalents must be provided so that information is also accessible to people from various disability groups using a variety of technologies. Text display is essential to make web pages available to people using assistive technology and also to enhance usability.

Meaning

  • For every image on a state agency web page, an alt attribute in the image tag must be used. The alt text must sufficiently describe the image so that a person unable to see the image can understand the content and meaning for its use. The term image in this standard includes elements such as pictures, graphical representations of text (including symbols), image map regions, animations (animated GIFs, for example), graphic list bullets, spacers, and graphical buttons.

    A good test to determine if a text equivalent is useful is to imagine reading the document aloud over the telephone. What would you say upon encountering this image to make the page comprehensible to the listener?

    Examples:
    • Mass.Gov logo and State House image:

      • If used as a link to the home page, the alt text could be "Link to Mass.Gov home page" or simply "Mass.Gov home page" (since screen readers generally indicate that the image has a link, or the user is tabbing through the links on the web page and will know that it is a link).
      • If not used as a link, the alt text could be "Mass.Gov Logo and State House Image."

    • If images are used for the bullets in a list, the alt text for each bullet could be "bullet."

    • If an image should be ignored by the screen reader (for example, a spacer image that controls page layout only), the alt text must be "" (quote-quote with no space).
  • For complex content, where the alt text does not provide a complete text equivalent, provide additional description using, for example, the longdesc element or a link to a page explaining the content.

Testing

If using Firefox:

  • From the Accessibility Toolbar Text Equivalents menu, click List of Images to view the alt text, image file name, and long description.

  • From the Web Developer toolbar Images menu, click Display Alt Attributes to display the alt text on the screen above each image and hyperlink.

If using Internet Explorer, the Vision Australia Web Accessibility toolbar allows you to check for accessibility as described in the documentation for the toolbar.

Additional Resources

WebAIM - Appropriate Use of Alternative Text