ampproject / ampproject/amphtml
amp-story: Controls/widgets without an accessible name
- Dominant language
- JavaScript
- Stars
- 14.9k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
# Controls/widgets without an accessible name
## WCAG Level
Level A
## Priority
High
## Pages/screens/components affected
* [Navigation](https://www.gstatic.com/amphtml/stamp/qa/navigation.html)
* [RTL](https://www.gstatic.com/amphtml/stamp/qa/rtl.html)
* [Video](https://www.gstatic.com/amphtml/stamp/qa/video.html)
* [Audio - amp-story background audio](https://www.gstatic.com/amphtml/stamp/qa/audio-story.html)
* [Audio - amp-story-page background audio](https://www.gstatic.com/amphtml/stamp/qa/audio-page.html)
* [Audio - amp-story using amp-audio](https://www.gstatic.com/amphtml/stamp/qa/amp-audio.html)
* [Animation](https://www.gstatic.com/amphtml/stamp/qa/animation.html)
* [Sharing](https://www.gstatic.com/amphtml/stamp/qa/sharing.html)
* [Tooltip](https://www.gstatic.com/amphtml/stamp/qa/tooltip.html)
* [Page attachment](https://www.gstatic.com/amphtml/stamp/qa/page-attachment.html)
* [Branching](https://www.gstatic.com/amphtml/stamp/qa/branching.html#page=page2)
* [Consent](https://www.gstatic.com/amphtml/stamp/qa/consent.html)
* [Prerender - Image](https://www.gstatic.com/amphtml/stamp/qa/prerender-img.html?amp_js_v=0.1#origin=https://www.google.com&prerenderSize=1&visibilityState=prerender&paddingTop=0&p2r=0&horizontalScrolling=0&csi=1&aoh=15526927198732&viewerUrl=https://www.google.com&history=1&storage=1&cid=1&cap=swipe,navigateTo,cid,fragment,replaceUrl)
* [Prerender - Video](https://www.gstatic.com/amphtml/stamp/qa/prerender-video.html?amp_js_v=0.1#origin=https://www.google.com&prerenderSize=1&visibilityState=prerender&paddingTop=0&p2r=0&horizontalScrolling=0&csi=1&aoh=15526927198732&viewerUrl=https://www.google.com&history=1&storage=1&cid=1&cap=swipe,navigateTo,cid,fragment,replaceUrl)
* [AMP Story Player - Player](https://www.gstatic.com/amphtml/stamp/qa/player.html)
* [AMP Story Player - AMP Story 360](https://www.gstatic.com/amphtml/stamp/qa/amp-story-360.html)
## 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)](https://www.w3.org/TR/WCAG21/#name-role-value), but also [WCAG 2.1 Success Criterion 1.1.1 Non-text Content (Level A)](https://www.w3.org/TR/WCAG21/#non-text-content). 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 `

```
```
An attempt has been made to provide a text alternative for these buttons by providing an `aria-label` on the wrapping `
The current approach was likely taken because in small-screen/smartphone view, the actual `` 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 ``, or to at least duplicate it (having it both on the `
```
```
## 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)](https://www.w3.org/TR/WCAG21/#name-role-value)
## More information
* [W3C - Understanding Success Criterion 4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html)
* [W3C - Accessible Name and Description Computation 1.1](https://www.w3.org/TR/accname-1.1/)
## Test data
Test date: January 2021
Contributor guide
Research direction
Start with the AMP Story previous, next, and replay control implementation, then inspect the listed AMP Story QA samples with a screen reader. Ensure each focusable control is announced with its purpose, test the rest of the website for the same issue, and resolve or file any remaining instances.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 35/100