Remove offscreen Heading and cleanup course card markup

Description

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

Severity: 3

Description: There are multiple heading elements hidden off-screen (probably for screen readers use) that are not necessary. The page has 2 "My Courses" headings implemented with H2 elements one after the other. In addition, there are a "Course Details" H3 heading before each course listed in the Dashboard. This is also unnecessary as the titles of the courses are within heading elements as well. Screen reader users who rely on these heading markups to understand the page structure may be confused when unnecessary headings are used throughout the page.

Pattern: None

Auditor Note: Developers must remove the extra heading H2 for My Courses. Only the on-screen heading should remain. The course details headings for each course should also be removed as it is not useful to screen reader users.

Internal Note: This is a general pattern I have been encouraging here at edX. Use Offscreen text sparingly, especially for things like headings. If it's helpful to add a heading for an SR user, it's probably helpful for a sighted user as well. In this case, the Offscreen H2 that precedes each course is unnecessary and should be removed. This leaves a very logical heading structure: h2 My Courses -> h3 My course name 1, h3 My course name 2, etc.

There is some additional cleanup that needs to be performed here. There is an aria-labelledby element on the section elements that references the heading that is slated to be removed by this ticket. 1) this shouldn't be a section element (div is fine), and it shouldn't have an aria-labelledby. 2) The parent article element should be a section element and it should have an aria-labelledby that references the h3 that is the course name (which will need an IDref now).

Epic Link

None

Activity

Show:
Mark Sadecki
November 15, 2017, 3:06 PM

It appears as though the first part of this ticket has already been resolved (duplicate H2's for My Courses). We still need to remove the off screen H2s in 3each course card though that read "Course details"

Mark Sadecki
November 15, 2017, 3:04 PM

This is definitely still an issue. The heading is not visible on screen, but it is to a screen reader. I made it visible in the screenshot above by removing the SR class from it. Here is another screen shot that shows the code (highlighted) that needs to be removed. The entire H2 node serves no useful purpose and can be removed from the course card template.:

Christopher Lee
October 30, 2017, 5:32 PM
Edited

The page has 2 "My Courses" headings implemented with H2 elements one after the other.

This doesn't seem to be true any more. There is only a single H2 element.
-Nevermind, they are referring to the h2 header being wrapped in a header class.

In addition, there are a "Course Details" H3 heading before each course listed in the Dashboard.

These headings are currently H2 headings, though it looks like the ticket's intent is to remove these headings regardless.

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

2

Reporter

Mark Sadecki