WCAG Level

Level A

Priority

Medium

Type

Images, Semantics

Pages/screens/components affected

• amp-stream-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. If the images act as actual controls (such as image-based buttons or links), this leads to the controls also lacking an accessible name, and in the case of links, links without any link purpose. Without an accessible name, interactive controls will simply be announced as generic "link", "button" or similar by assistive technologies.

In the amp-stream-gallery examples (e.g. the basic amp-stream-gallery), the previous/next graphical controls receive keyboard focus, but lack a text alternative. They also do not expose their role, nor an accessible name, to assistive technologies.

Specifically, the <button> elements here have been set to be aria-hidden="true" - presumably to keep them keyboard-accessible (for sighted keyboard users), but to otherwise hide them from screen reader users - since all gallery elements can be reached using a screen reader, even when they're scrolled out of view.

User impact

When navigating through the page (for instance, using Tab / Shift + Tab to move from one focusable element to the next), assistive technology users will land on the previous/next controls. However, since these controls lack both a role and an accessible name, they will be announced simply as blank/empty tab stops. The controls may further - depending on the specific assistive technology - be announced as "clickable", as there is associated JavaScript behaviour tied to these controls.

While these controls serve no practical purpose to blind screen reader users, and may only be perceived as a redundant tab stop, this may be confusing for (partially or fully) sighted assistive technology users, who will be able to see the controls but not hear them announced.

Required solution

Graphical controls must be given an accessible name. There are various ways to achieve this. For controls that contain an <img> element, one option is to provide an appropriate alt="..." attribute for the image. Alternatively, accessible names can be provided by adding aria-label="..." or aria-labelledby="..." to the control itself.

As a general rule, do not add aria-hidden="true" to controls that receive focus - see also Using ARIA - Fourth Rule of ARIA Use.

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.

Implementation guidance

The current controls are implemented as empty <button> elements, with the graphical arrow added via CSS.

<button class="i-amphtml-stream-gallery-prev" aria-hidden="true"></button>
...
<button class="i-amphtml-stream-gallery-next" aria-hidden="true"></button>

We recommend removing the aria-hidden="true" and adding an aria-label to provide a text alternative for the image, as well as an accessible name for the control. The aria-label can provide some context to assistive technology users, to clarify that the function of the controls is mostly visual/related to scrolling of the gallery.

<button class="i-amphtml-stream-gallery-prev" aria-label="Scroll previous slides into view"></button>
...
<button class="i-amphtml-stream-gallery-next" aria-label="Scroll next slides into view"></button>

Test procedure(s)

Use these steps to confirm that the solution has been correctly applied:

1. Turn on your screen reader
2. Navigate through all controls (using Tab/Shift+Tab to move to all focusable elements)
3. Make sure that controls are announced with an actual name and role (e.g. "Delete, button") rather than just as generic nameless controls (e.g. "button", "link"), or as "blank"/empty tab stop.

Related standards

• WCAG 2.1 Success Criterion 1.1.1 Non-text Content (Level A)
• WCAG 2.1 Success Criterion 4.1.2 Name, Role, Value (Level A)

More information

• W3C Accessible Name and Description Computation 1.1
• 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