adobe / adobe/aem-core-cif-components

[Accessibility] [Cart Trigger] Cart information (# of items or empty) is not communicated to screen reader users

Open
#685 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
Java
Stars
109
Forks
78
Avg merge
4d 18h
Merged PRs (30d)
4

Description

**Steps to Reproduce**
1. Enable NVDA screen reader.
2. Open page in Google Chrome.
3. Navigate to cart trigger buttons using TAB or SHIFT + TAB.
4. Notice the identical name announcements despite differing cart states.

**Current Behavior**
The cart trigger buttons use an `aria-label` attribute to identify their accessible name. The `aria-label` attribute overrides the content of the button, so the text within the button that identifies the number of items in the cart is not announced to screen reader users.

**Expected behavior/code**
Authors should ensure that any information revealed to sighted users is also available to screen reader users. The number of items in the cart should be included in the accessible name.

**Environment**
Chrome 92, Windows 10, NVDA 2020.4
AEM Core Components v. 2.17

**Affected Users**
Without Vision; Limited Vision; Limited Manipulation

**WCAG SC**
2.4.6 Headings and Labels

**Possible Solution**
Communicate the cart state by adding the number of items to the `aria-label`, or by removing the aria-label and adding the cart label to a visually-hidden element within the button.

Contributor guide

Open the contributing guide

Research direction

Start by locating the cart trigger buttons in the AEM Core Components implementation and inspect how their accessible names are assembled. Reproduce the issue with NVDA in Chrome, then verify that populated and empty cart states are announced distinctly to screen reader users.

Written by the indexing model from the issue text.

Assessment

Tech stack
java
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.