Too many adjacent/redundant links

Description

Location: My Courses Dashboard e.g. https://courses.edx.org/dashboard

Severity: 3

Description: The images next to the courses are image links with alternative texts. However, aria-hidden="true" is added in the parent div container. When tabbing on the image links, screen readers guess at the name, role of the element since the aria-hidden is hiding all the information from assistive technologies. Actionable elements that receive focus must not have aria-hidden attribute assigned.

Pattern: None

Auditor Note: Since the image link performs the same action as the course link, it is suggested to not have a repetitive image link. Therefore, developers must remove the anchor element from the image. In this case, the aria-hidden attribute will hide the image from assistive technologies and the image will no longer be in the tab order.

Internal Note: This one is easy to fix. Simply add a tabindex="-1" to the link that wraps the image. This will prevent it from showing up in the taborder for both screen reader and keyboard users. Thanks for discovering this neat trick .

Steps to Reproduce

None

Current Behavior

None

Expected Behavior

None

Reason for Variance

None

Release Notes

None

User Impact Summary

None

Activity

Show:
Fixed

Assignee

Christopher Lee

Reporter

Mark Sadecki

Reach

None

Impact

None

Platform Area

None

Customer

None

Partner Manager

None

URL

None

Contributor Name

None

Groups with Read-Only Access

None

Actual Points

None

Category of Work

None

Platform Map Area (Levels 1 & 2)

None

Platform Map Area (Levels 3 & 4)

None

Story Points

1

Sprint

None

Due date

2017/12/08

Priority

CAT-2
Configure