adobe / adobe/aem-core-cif-components
[Accessibility][Product Teaser] Both the product image and product name are linked to the product page
- 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. Use TAB and/or SHIFT + TAB to navigate through the product teaser.
**Current Behavior**
The link text and product image are separate links serving the same purpose, which can make for a cumbersome experience as screen reader users navigate through the product teaser element.
**Expected behavior/code**
When links serve the same purpose, they should be identified by the same accessible name. In this case, because the image and link are immediate siblings in the focus order, it makes sense to only link one to reduce the navigation needed for keyboard-only users. To capture image clicks and link clicks, use Javascript.
**Environment**
Chrome 91, Windows 10, NVDA 2020.4
AEM Core Components v. 2.17
**Affected Users**
Keyboard-only users, screen reader users
**WCAG SC**
2.4.4 Link Purpose (In Context)
Contributor guide
Research direction
Reproduce the Product Teaser issue in Chrome with NVDA and inspect the component's markup and JavaScript click handling. Confirm that keyboard and screen-reader navigation exposes only one link for the product destination while both image and name clicks still reach that page.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100