WCAG Level

Level A

Priority

Low

Type

Images

Pages/screens/components affected

• amp-accordion
• amp-selector
• amp-sticky-ad
• amp-inline-gallery
• amp-lightbox-gallery

Description

When images do not have a text description, it means anyone who cannot see images properly will not know what the images are for.

We found various instances of images used for the component demos (rather than the components themselves) that currently lack a text alternative.

This also includes "advert" images pulled from third-party providers, which may be outside of the scope/control of the AMP project itself.

User impact

If an image does not have an appropriate text description, someone who is blind and uses a screen reader or someone who has images turned off in their browser to save on bandwidth will be completely unaware of the image's purpose. If the image conveys important information like a graph, or is critical to the operation of a control like a link or button, then a missing text description can prevent them from completing vital tasks.

While the impact is low due to the fact that these are simply placeholder/demo images, it will nonetheless adversely affect a user's understanding of the demo and the component itself.

Required solution

Make sure that every image that conveys information or is used to perform an action has an appropriate text description. The text description must be clear and relevant to the context in which the image is being used.

For all images implemented using <amp-img>, make sure to provide an appropriate alt="..." attribute. See accessibility considerations for images.

For ad images, it may be possible to check with the ad providers to ensure that their content will have appropriate accessibility considerations.

This solution must be applied to all instances of the issue identified within the test sample, then applied to all other instances of the same issue identified throughout the rest of the website.

Test procedure(s)

Use these steps to confirm that the solution has been correctly applied to issues identified within the test sample, and to test the rest of the website for instances of the same issue:

1. Check that all images are provided with appropriate alternative text.
2. Check that the alternative text acts as a suitable equivalent for the image.

Definition of done

Complete all of these tasks before closing this issue or indicating it is ready for retest:

• All issues identified within the test sample have been resolved.
• The rest of the website has been tested for the same issue.
• All issues identified throughout the rest of the website have been resolved or filed as new issues.

Related standards

• WCAG 2.1 Success Criterion 1.1.1 Non-text Content (Level A)

More information

• W3C: Image concepts
• W3C: An alt decision tree
• W3C: HTML 5.2 Requirements for providing text to act as an alternative for images

Test data

Test date: November 2020