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

Status

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