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).

Steps to Reproduce

None

Current Behavior

None

Expected Behavior

None

Reason for Variance

None

Release Notes

None

User Impact Summary

None

Activity

Show:
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.

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.:

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"

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

2

Sprint

None

Due date

2017/12/08

Priority

CAT-2
Configure