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 .

Epic Link

None

Activity

Show:
Fixed
Your pinned fields
Click on the next to a field label to start pinning.

Priority

CAT-2

Assignee

Christopher Lee

Sprint

None

Story Points

1

Reporter

Mark Sadecki