universal-design-center

  • turtle eating strawberry on grass

Web Accessibility Criteria - Images

  Description

All images that convey meaning must include an alternative method to describe an image. 

Alternative Text

Alternative text or alt text is text replacement for an image that is used to explain what the image is and what the image is trying to convey to the user. It requires using the alt attribute on an img element. Alternative text should briefly describe what the image is conveying.

Syntax:<img alt="text">

If the image is decorative image (background image), it does not need alternative text. Decorative images should be given the “null” attribute.

Syntax:<img alt="">

Captions

The best method to provide alternative description to users is by using captions. Captions allow equal information to both sighted and assistive technology users. At times, an alternative text might provide more information to assistive technology users giving a disadvantaged to sighted users. Moreover, alternative text can be inconvenience to assistive technology users when it becomes too long. Captions are located either below or above the image to associate the description and image.

Syntax: <figure> <figcaption> text </figcaption> </figure>

Sentence image description

Sentence image description is another method to provide text alternatives for images. It requires including the description of the image within the context of the page. However, when the image’s description is included within the surrounding content, the user might forget the description of the image once they reach it. Specific coding methods must be used to relate the image to the description. Refer to the Best Practices for Accessible Images for more information.

back to top

  Why are text alternatives for images important?

Image descriptions are an important to ensure your image is accessible to all people including people with disabilities. The image description will allow all users the ability to know what the image is about and understand additional information. Images that need text alternatives and do not have them may present barriers to people with disabilities. In addition, image descriptions are a benefit to all users because they can serve as an image replacement if the image cannot be displayed on the page. For example, if a user has the images disabled on their web browser the alternative text or caption will allow them to determine what the image is about.  Additionally, text alternatives can be used to help search engines identify your website more easily. 

Section 508/ WCAG 2.0 Summary of Requirement

When an img element is present, a short alternative text must be given. If the image contains words that are important to the interpretation of the image, it must be included in the alternative text.

Best Practices

Visit the Best Practices for Accessible Images web page for more tips and tricks for image accessibility.

  • The alternative text must be accurately represent the image.
  • Do not use the phrases “image of” or “graphic of” in the alternative text.
  • The best method to practice is using captions this will provide equal access to all users.
  • If images have text within them, the alternative text should include the embedded text and a brief description of the image.
  • Alternative Text should be within 8 to 80 characters long. If it is too long complex image description method should be used.
  • If the image is a link, both the image and the link will require a description.
  • The alt text should explain where the link goes if the image is inside an <a> element along with the ARIA-label attribute.
  • Decorative images do not need alternative text. (alt=””)

Examples

Example 1: Alt Text 

The image below is a meaningful image that needs a text alternative via alt text or caption. If alt text were used good alternative text for this image would be: <Img Alt= "Duck swimming in a pond"> 

Duck swimming in a pond. Alternative Text Example

Example 2: Captions

The example below is another meaningful image that needs either alt text or a caption.  If a caption were used, it could provide additional context may not otherwise be seen in the image. 

Orange Trees from the CSUN Orange Grove

Example 3: Sentence Description 

Providing an image description within the context of the page is a third basic method for describing images. 

The male is metallic blue on the crown, the feathers of the head being short and curled. The fan-shaped crest on the head is made of feathers with bare black shafts and tipped with blush-green webbing. A white stripe above the eye and a crescent shaped white patch below the eye are formed by bare white skin. The sides of the head have iridescent greenish blue feathers. The back has scaly bronze-green feathers with black and copper markings. (Example derived from W3C

For more examples go to Best Practices for Accessible Images

back to top

 

How to Test

Manual Review

  1. Review each img element and ensure it has the altattribute.
    1. If Alt is present, Examine if the alternative text within the alt attribute contains a short and meaningful description of the image.
    2. If alt attribute is not present, look to see if there is an alternative image description method (e.g. caption, description within the text, linked image methods, etc)
      1. Review the text alternative to determine if it is a meaningful description of the image

Automated Testing Tools

Web Developer Extension

  1. Open the Web Developer toolbar on your browser (Chrome, Firefox)
  2. Navigate to the Images column
  3. Select “Display Alt Attributes”
  4. Manually review the alternative texts to see if they meet the guidelines. 

WebAIM WAVE tool

Activate the WAVE toolbar and navigate to the “Details” panel. Use “Errors, Features, and Alerts” to check all the alternative text that is present in the webpage.

The following icons are accessibility errors related to images found by WAVE: 

    • Image Alt-Text Error Icon:  indicates image is missing alternative text
    • Spacer Image Alt-text Error Icon :  Spacer image missing alternative text
    • Linked Image Alt-Text Error Icon: indicates linked image is missing alternative text
    • Button alt text error : indicates image button is missing alternative text
    • Image-Map Alt-Text-Error Icon: indicates image map is missing alternative text
    • LongDesc error: Image has a long description 

Compliance Sheriff

The Compliance Sheriff checkpoints related to images are Section A and CSU ATI Alt Quality Requirements. For more information, refer to the CSU ATI Accessibility Requirements.

back to top

Resources