mrrossmullen
commented
3 years ago This article changed my view of deciding on correct heading levels as such I don't believe this is a WCAG 2.1 AA failing against 1.3.1: Info and Relationships. The 2 <h1> elements are not implying a hierarchy. It may provide a confusing layout, which is more subjective but that isn't a WCAG 2.1 failure.
More than one <h1> The converse is also true: a top-heavy heading hierarchy is unusual but not incorrect. Users typically expect only a single <h1>, which is used to represent the main heading or title on the page. As long as the visual presentation of multiple <h1>s doesn’t imply a hierarchy (such as the first <h1> being styled visually to be larger or bolder than the second <h1>), then having more than one <h1>—while potentially confusing—does not represent a WCAG failure
AtamDhillon
Text should not be a heading Type: WCAG 2.1 failure Fails 1.3.1 Info and Relationships - Level A Location: "Design System" text - Header Platform: All Technology: All Severity: Medium
What’s the issue? The text "Design System" is marked as heading text H1 inappropriately.
Why it matters Just like a sighted user uses headings to understand content on a page, screen reader users do the same by navigating through headings. When text that isn’t a heading is marked up as a heading element, it disrupts a screen reader user’s ability to understand the structure and content of a page using headings.
What may resolve this issue- There are currently two H1 tags used on home page. There should really be one h1 element on a page sitewide. The "Design System" text in Header may remain as h1 on home page and the text "Home" on home page may be changed to a div with styling similar as h1 if h2 styling may not suit.
For the rest of the site- Change "Design System" text from a heading element to a div element. Use CSS to keep the same visual style as the actual page title should really be the h1 element on all other pages.
The above approach is how the issue was resolved on SM website.