1.10 Confusing heading structure and hierarchy (Positive)
1.10.1 WCAG 1.3.1 (A), 2.4.6 (AA) - Desktop, Mobile, iPad
The headings on the ‘Check Your Answers’ page do not follow an intuitive structure. The heading hierarchy results in a page where the relation between different components is unclear. Furthermore, some heading text is repeated, which would result in users being unable to quickly identify and navigate the content.
Screen reader users may sometimes view just the headings of the page to gain a better understanding of the structure and outline of the content. 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. When this text is repeated and not meaningful, it affects the time and effort needed to understand how the content is presented on the page.
Visually, the hierarchy of the page is clear. For instance, the ‘Dependants’ section of the page is presented in bold, large text. The subheadings are located within distinct containers, and make use of a smaller text size. However, to screen reader users, ‘Dependants’, as well as the contained ‘Dependants’, ‘Dependant Income’, and ‘Dependant 1 income’ are all level 2 headings. This obscures the structure of the page: screen reader users navigating via headings would not be able to easily identify that the <h2> headings are actually part of the <h2> section.
FIGURE 1.15: All headings on Check Your Answers page with Dependants section highlighted
FIGURE 1.16: Dependants section headings on the Check Your Answers page
1.10.2 Recommendation
Update the existing headings to make them more informative and hierarchical. The most important heading has the rank 1 (<h1>), the least important heading rank 6 (<h6>). Ensure that no heading levels are skipped and use HTML specification to ensure important information is presented in a logical and hierarchical manner.
For instance:
<h1> Check your answers </h1>
...
<h2> Dependants </h2>
<h3> Does your client have dependants? </h3>
<h3> Do they receive income? </h3>
<h3> Dependant 1 income </h3>
...1.10.3 Spot check: April 2024
This issue has been resolved. The heading structure has been improved with dependants as a <h2> and the subheadings as <h3> elements. The headings are also more informative and distinguishable.
This has been changed from a ‘Medium’ severity issue to a ‘Positive’ finding.