ampproject / ampproject/amphtml

amp-story: Controls/widgets without an accessible name

Open
#32,516 1 comment 0 reactions 0 assignees View on GitHub
Related to: Accessibility Stale Type: Accessibility Type: Bug WG: stories
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 `

` elements wrapped around a ``.

![One of the 'next' buttons](https://user-images.githubusercontent.com/54933393/107253684-79d56480-6a2e-11eb-99b9-d06c91419e2a.png)

```




```

An attempt has been made to provide a text alternative for these buttons by providing an `aria-label` on the wrapping `

`. 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 `` element, which lacks an accessible name).

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 `

` and 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.