amp-story: Controls/widgets without an accessible name

[TetraLogicalHelpdesk]

Controls/widgets without an accessible name

WCAG Level

Level A

Priority

High

Pages/screens/components affected

• Navigation
• RTL
• Video
• Audio - amp-story background audio
• Audio - amp-story-page background audio
• Audio - amp-story using amp-audio
• Animation
• Sharing
• Tooltip
• Page attachment
• Branching
• Consent
• Prerender - Image
• Prerender - Video
• AMP Story Player - Player
• AMP Story Player - AMP Story 360

Description

Interactive controls need an accessible name, which will be used by assistive technologies to convey the control (together with its role and state) to users.

Across all of the tested AMP stories, the previous/next/replay controls (visible in large-screen/desktop view) lack an accessible name. Note that this issue not only fails WCAG 2.1 Success Criterion 4.1.2 Name, Role, Value (Level A), but also WCAG 2.1 Success Criterion 1.1.1 Non-text Content (Level A). For this reason, this has also been noted in the separate issue Images with missing or inadequate text descriptions.

User impact

When a control lacks a name, it will be announced by assistive technologies as a generic unlabelled control. This will not be sufficient to convey the control's purpose. This may make it difficult or impossible for users to make sense of the controls or to confidently use them.

Required solution

Controls must expose an accessible name, which should give an indication of the control's purpose and functionality.

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

Across all tested samples, the graphical previous/next/replay controls visible in the large-screen/desktop version of AMP Stories are implemented as <div> elements wrapped around a <button>.

<div class="i-amphtml-story-button-container i-amphtml-story-fwd-next next-container" role="button" aria-label="Next page">
  <button class="i-amphtml-story-button-move"></button>
</div>

An attempt has been made to provide a text alternative for these buttons by providing an aria-label on the wrapping <div>. However, this is not consistently announced by assistive technologies - particularly when navigating directly to controls using Tab/Shift+Tab (which sets focus directly to the child <button> element, which lacks an accessible name).

The current approach was likely taken because in small-screen/smartphone view, the actual <button> is removed. However, we do not recommend this approach (see the related best practice issue to add actual focusable and visible navigation controls even in small-screen view). We recommend to instead move the aria-label to the <button>, or to at least duplicate it (having it both on the <div> and the <button>).

<div ...>
  <button class="i-amphtml-story-button-move" aria-label="Next page"></button>
</div>

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. Turn on your screen reader.
2. Navigate through all controls on the page.
3. Verify that the control is announced with a name by the screen reader, rather than just as a generic unlabelled button/link/etc.

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 website have been resolved or filed as new issues.

Related standards

• WCAG 2.1 Success Criterion 4.1.2 Name, Role, Value (Level A)

More information

• W3C - Understanding Success Criterion 4.1.2 Name, Role, Value
• W3C - Accessible Name and Description Computation 1.1

Test data

Test date: January 2021

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.