• Web Criteria Images Banner

Web Accessibility Criteria - Images


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

Alternative Text

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

Syntax:<img alt="text">

If the image is a decorative image (background image), it does not need alternative text. All decorative images should have the “null” attribute.

Syntax:<img alt="">


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 an 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 essential 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. Image descriptions also benefit 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 concerning. Additionally, text alternatives can be used to help search engines identify your website easily.

Section 508/ WCAG 2.0 Summary of Requirement

Provide a short alternative text, when an img element is present. 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 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, use a complex image description.
  • 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=””)


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 alt attribute.
    1. If the alt attribute is present, examine if the alternative text within the alt attribute contains a short and meaningful description of the image.
    2. If the 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 on the webpage.

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

    • Alt-Text Error Icon:  indicates the image is missing an alternative text
    • Alt-text Error Icon:  Spacer image missing an alternative text
    • Alt-Text Error Icon: indicates linked image is missing an alternative text
    • Button alt text error: indicates the image button is missing an alternative text
    • Image-Map Alt-Text-Error Icon: indicates image map is missing an 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.