2.27 Missing heading level and uninformative headings (M)
FIGURE 2.60: Missing H1 highlighting on the Monitoring page
2.27.1 WCAG 1.3.1 (A), 2.4.6 (AA), 4.1.1 (A) - Desktop
On the Monitoring page overview, there is a missing <h1> element on the page and this issue occurs across the website. This would affect screen reader users, who may view just the headings of the page to gauge the content and structure of the page quickly before interacting with the content. The <h1> element is especially important since it describes the main content of the page. In this case, screen reader users would have to navigate through more of the page before understanding its purpose.
Apart from being hierarchical, with the beginning of the page’s main content starting with <h1> and following subsections nested accordingly, these headings also need to be informative. On this page, “Error” has been coded as subheadings—this gives users no context to the page.
The WebAIM screen reader survey has found that headings are the number one means by which screen reader users get a sense of a complex page. So, heading levels need to be meaningful and hierarchical. Skipping heading levels can cause users to be confused about the importance of the content.
An additional benefit to using proper <h1> elements is that some search engines use these to understand the page content and display relevant results to users. Providing informative and structured heading elements helps with improved optimisation.
2.27.2 Recommendation
Ensure that no heading levels are skipped and use HTML specification to ensure important information is presented in a logical and hierarchical manner. The page’s main content should start with an <h1> element. It is also best practice to ensure that the page contains only one h1 element.
Nest headings by their rank (or level). Start the main content of a web page with an <h1> heading, with no other headings before this high-level heading. Mark the sub-sections of the page as <h2>. If the level 2 sections contain sub-sections, mark these as <h3>, and so on.
Use CSS to style elements instead of dropping heading levels for aesthetic purposes.
2.27.3 Spot check: December 2022
This issue is unresolved. Please refer to the recommendation above to fix the issue.