Wrong heading structure on website

[selfthinker]

This issue is from the accessibility audit of the Design System website by DAC in July 2024.

DAC's description

• Page: Accessibility and Password input
• WCAG reference: none (Usability)
• Issue ID: DAC_Illogical_Heading_Structure_Usability_01 and DAC_Illogical_Heading_Structure_Usability_02

Accessibility page

The heading structure of the page does not make use of a logical heading structure. The ‘Accessibility’ heading is marked as a <h1>, and the sub-headings of this heading are marked up as <h3>. This means that screen reader users may not be able to identify the structure and relation of content throughout the page.

Current code:

<h1 class="govuk-heading-xl">Accessibility</h1>
[…]
<h3 id="accessibility-changes-to-the-design-system-to-meet-wcag-22">Accessibility changes to the Design System to meet WCAG 2.2</h3>
[…]
<h3 id="accessibility-strategy">Accessibility strategy</h3>
[…]

Password input

The heading structure of the page does not make use of a logical heading structure. The ‘Password input’ heading is marked as a <h1>, and the sub-heading of this heading is marked up as <h3>. This means that screen reader users may not be able to identify the structure and relation of content throughout the document.

Current code:

<h1 class="govuk-heading-xl">Password input</h1>
[…]
<h3 id="new-wcag-22-criteria-affect-this-component">New WCAG 2.2 criteria affect
this component</h3>
[…]

DAC's proposed solution

Headers should be logical and reflect the structure of information on the page, briefly introducing the topic(s) that follow them.

Additional instances

As this can potentially happen on any page, this work should include checking all the other pages for a wrong heading structure. It might be worth making two different cards for this: One for checking and recording all instances, the other for fixing them.

To save time, it makes sense to audit all the body copy issues together:

• 4010

• 4013

• 4023

• 4024

• 4025

Needed roles

Content designer

### Tasks
- [x] Use accessibility tool, such as WAVE or Axe to find [badly-nested headings, as per GOV.UK content design guidance](https://www.gov.uk/guidance/content-design/writing-for-gov-uk#headings)
- [x] Capture report into single document
- [x] Use document to decide on actions for each instance
- [x] Implement actions in PR
- [x] Review with team
- [x] Publish
- [x] Consider adding process to prevent in future

[querkmachine]

Prematurely closed. Still needs https://github.com/alphagov/govuk-design-system/pull/4054 to be merged.

[selfthinker]

This should not be closed until the whole website has been audited for this issue. Or you could split this card into two (or more) cards.

[selfthinker]

Reopening as this isn't done yet. (See my previous comment.)

[calvin-lau-sig7]

To detect, we can:

• use a tool such as WAVE or Axe to find badly-nested headings

No assessment would be needed after we get the results of the scan.

To resolve, we can:

• reshuffle heading structure to avoid skipping heading levels
• in difficult cases, we can write or remove the need for headings, but we'll avoid doing this if possible

[selfthinker]

Just for more context, this is what the GOV.UK content guidance says about headings.