Audit usage of header elements in Learner Dashboard

[MaxFrank13]

Headers (ie. h1, h2, h3,... tags) should be used carefully as they are really important for making pages accessible.

Resources

Confluence page on how to use headers

Multiple uses of an h1 tag

There should only be one h1 tag per page. Having more will potentially confuse a11y tools.

The usage that seems correct at first glance is in the Dashboard component where a pageTitle is rendered as an h1 (source). This appears to be correct but we should verify.

There are at least two other places where an h1 is used:

• NoCoursesView
• ConfirmEmailBanner

We’ll want to change these according to where they are in the layout.

h2 being used as a spacer

An h2 element is being used to create white space in the layout for Learner Dashboard (source):

Setting the element to a div doesn’t immediately fix the issue:

There are custom styles being applied to the course-list-title class that are actually controlling the layout.

This is a problem because h2 should never be used for this purpose. There is no screen reader text or anything to indicate that this is used for accessibility in any way.

We should try to find a way to achieve the same layout/view/look without using an h2 for the spacing.

Other usage of headers

We should verify that all other uses of header tags are up to accessibility standards and being used properly according to the doc.

Acceptance Criteria

• There is only one h1 and it follows best practice for what an h1 should be (see doc)
• h2 is no longer used for spacing the layout
• Assess other uses of header elements
• If they are trivial, fix them
• If not, make follow up tickets as necessary
• The layout looks the same as before with no visual or behavioral changes in desktop and mobile views.
• A commit mentions the improvement for screen reader experiences

[navyanihitha]

Hi @MaxFrank13, I'm interested to work on this, could this issue be assigned to me.

[MaxFrank13]

Absolutely! Thanks for picking it up