TIA-92: Fixed page heading tags order

[zubairshakoorarbisoft]

Description

The page currently contains two elements:

Hidden H1: One H1 element is hidden and not visible to users.
Main Heading: Also Main heading “My Courses” is h2, it should be H1 instead as it is the main heading.

Related to overhangio/tutor-indigo#146

Expected Behavior

There should be only one H1 element on the page, serving as the main title or landmark heading.
All programmatic headings (H1, h2, etc.) must visually represent their respective levels.

Screenshots

Before:

After:

To have a more context on the issue, please have a look into the following ticket(s):

1. https://tree.taiga.io/project/zaraahmed-tutor-indigo-accessibility/us/92

[justinhynes]

Hi @zubairshakoorarbisoft -- I was going to take a look at this today on behalf of Aperture but it looks like there are some failing tests. Would you be able to fix these at your earliest convenience? Thanks!

[MaxFrank13]

I would be curious to understand more around the decision to change the original h1.

The h1 still gets picked up by accessibility and assistive technologies as the main header and it uses the pageTitle, which defaults to "Learner Home". This is a good representation of what this page encompasses.

Having the h1 be "My Courses" for this page does not fully encompass what the Learner Dashboard does. For example, there is a side panel for recommendations of courses to try and there could be other features added in the future.

Is there a reason why the h1 has to be visible in order to meet accessibility standards?

[deborahgu]

Is there a reason why the h1 has to be visible in order to meet accessibility standards?

I was curious about this, so I just read through all of the semantic structure guidelines in WCAG 2.1 and not only do headings not need to be visible, but h1 itself isn't even a required level, as long as the semantic structure it's on the page is meaningful and navigable. @MaxFrank13 is also right that "Learner Home" (or the pageTitle text, whatever it is a particular instance) does turn up as h1 as far as assistive technologies are concerned, i did just verify that.

It is frequently the case that headings will be visible for best accessibility, because they are not just useful to users of screen readers and braille displays. (learners with low vision and learning disabilities can often benefit from them as well, for example). But it's actually a relatively common accessibility technique to make offscreen headings. For example, a sidebar whose purpose is obvious to sighted users just by page layout might have an offscreen heading to clarify its purpose for users of screen readers and braille displays, or to make it easier to navigate to for keyboard & voice users.

[zubairshakoorarbisoft]

I would be curious to understand more around the decision to change the original h1.

The h1 still gets picked up by accessibility and assistive technologies as the main header and it uses the pageTitle, which defaults to "Learner Home". This is a good representation of what this page encompasses.

Having the h1 be "My Courses" for this page does not fully encompass what the Learner Dashboard does. For example, there is a side panel for recommendations of courses to try and there could be other features added in the future.

Is there a reason why the h1 has to be visible in order to meet accessibility standards?

Yes @MaxFrank13, assistive tech picks up the hidden H1 — but:

Per WCAG 1.3.1 – Info and Relationships, information and structure must be programmatically and visually conveyed. The H1 should be both discoverable and visible to all users.

“Learner Home” is too generic:
Users landing on this page are primarily there to interact with their courses, not just a generic home. If the H1 is too broad, screen reader users lose the immediate sense of page purpose.

[deborahgu]

@zubairshakoorarbisoft:

Per WCAG 1.3.1 – Info and Relationships, information and structure must be programmatically and visually conveyed.

This is true and is part of 1.3.1, but

The H1 should be both discoverable and visible to all users.

this is not stated in WCAG, and, in fact, "visible to all users" is not even considered a best practice. Headings that are only visible to assistive technology is a common and often-recommended technique for exposing aspects of page structure that are visually conveyed by layout.

“Learner Home” is too generic: Users landing on this page are primarily there to interact with their courses, not just a generic home. If the H1 is too broad, screen reader users lose the immediate sense of page purpose.

Looking at this page outline semantically, the overall page structure looks both meaningful and useful for navigation by assistive tech:

Notes:

• I'm not going to defend the empty heading over the sidebar CTA.
• I'm also not going to defend the use of headings for formatting in the "looking for a new challenge" CTA.
• Within a set of modules installed on a given instance, the structure isn't guaranteed to be correct. For example, on edx.org that entire sidebar is a recommendations panel which should be popped up a heading level, ideally. But that's the responsibility of the maintainers of that particular instance and its plug-ins.

[wittjeff]

I concur with everything @deborahgu said above. The headings issues are all "best practice" level concerns, not WCAG AA conformance level issues. Re the H2 over the Aside (assuming that's what it is), my bet is someone thought it would be a good idea for the headings outline to reflect the landmarks outline, but that Aside is multi-purpose. Better not to have an empty heading, but I think those are now skipped by AT tools anyway.