adobe / adobe/aem-core-cif-components

[Accessibility][Product Teaser] Both the product image and product name are linked to the product page

Open
#684 4 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. 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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.