aem-core-cif-components [Accessibility][Product Teaser] Both the product image and product name are linked to the product page

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

Open LevelAccessA11y opened this issue 3 years ago • 4 comments

Steps to Reproduce

Enable NVDA screen reader.
Open page in Google Chrome.
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)