Create logical Heading order and Page structure in Studio

Description

The Heading order and page structure in pages that affect all of Studio needs to be adjusted to make navigating by Headings and other landmarks more logical and intuitive. I think the existing Heading structure is too granular and has some semantic errors. I am advising against using SR-only Headings in favor of using well structured/semantic HTML5 with useful aria-labels/accessible names.

  • Remove the screen reader text "Current Course" from Course Name Heading (this is implied and provides no additional or helpful context.)

  • Remove SR-only Headings for "Course Navigation" and "Account Navigation"

  • Remove the nav element associated with Account Navigation and move its children inside of "Course Navigation" (there is too much granularity here. One nav for all should do.)

  • Change the aria-label to "Studio" (since we are not navigating the Course, we are navigating Studio) on the remaining <nav> element.

  • Remove Headings in the Course Navigation: Course Content, Course Settings, Tools (it is not appropriate to use Heading elements for nav items.)

  • Remove Headings in the Account Navigation: Help, Username (same)

  • Consider making SR only heading " EdX Studio Documentation" visible to everyone (its level is OK) (Should it say EdX? or should it be generic.)

  • Move "Looking for Help with Studio" div.wrapper-sock wrapper inside of main, make it an aside with an aria-label="Help using Studio"

  • Remove role=contentinfo from the footer element.

Abridged page structure should look something like this:

Looking at the page outline, it should look like this:

Before:


After:

Steps to Reproduce

None

Current Behavior

None

Expected Behavior

None

Reason for Variance

None

Release Notes

None

User Impact Summary

None

Status

Assignee

Unassigned

Reporter

Sarah Fischmann

Reach

None

Impact

None

Platform Area

None

Customer

None

Partner Manager

None

URL

None

Contributor Name

None

Groups with Read-Only Access

None

Story Points

None

Actual Points

None

Category of Work

None

Platform Map Area (Levels 1 &amp; 2)

None

Platform Map Area (Levels 3 &amp; 4)

None

Priority

CAT-3
Configure