Images

These techniques will allow assistive technology to inform the viewer about the information shown within the image. It can also discard any images that are only decorative.

Accessibility Checklist

• Is your image decorative?
  • If Yes, have you checked the alt attribute is present but empty?
  • If No, have you provided text in the alt attribute?

Alternative Text

If your image is portraying information then the alternative text, known as alt text, should describe the image. If the text is too long, consider using a caption to describe the image.

Example

<img src="cat-wearing-cape.jpg" 
     alt="A picture of a cat wearing a blue mask and blue cape."
/>

Decorative Images

If the image is decorative, consider including it directly into the CSS. If that isn't possible you should ensure you have an empty alt field, and the title field is either missing or empty.

IMPORTANT

Make sure that you always have an alt field even though it is empty for decorative images.

Example

<img src="decorative.jpg" 
     alt="" 
     title="" 
/>

Associated WCAG Criteria

1.1.1 Non-Text Content (Level A)

All non-text content visible on the website has a text alternative that serves the same purpose. See the WCAG 2.2 Guidelines for Non-Text Content for more information.

These examples used the following techniques:

• H37
• H67

See the WCAG documentation for Other Techniques for Non-Text Content