Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Wrong heading structure on website #4025

Closed
7 tasks done
selfthinker opened this issue Aug 9, 2024 · 5 comments · Fixed by #4044
Closed
7 tasks done

Wrong heading structure on website #4025

selfthinker opened this issue Aug 9, 2024 · 5 comments · Fixed by #4044
Assignees
@calvin-lau-sig7
Labels
accessibility audit july 2024 Issues from July 2024 external accessibility audit against WCAG 2.2 criteria

Comments

@selfthinker
Copy link
Contributor

selfthinker commented Aug 9, 2024 •
edited by owenatgov
Loading

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.

Screenshot of top of accessibility page with first three headings

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.

Screenshot of top of Password input page showing the first two headings

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:

Needed roles

Content designer

Tasks
Beta Give feedback
@selfthinker selfthinker added accessibility audit july 2024 Issues from July 2024 external accessibility audit against WCAG 2.2 criteria labels Aug 9, 2024
This was referenced Aug 9, 2024
Closed
Open
Open
Open
@kellylee-gds kellylee-gds mentioned this issue Aug 12, 2024
Closed
@querkmachine querkmachine self-assigned this Aug 16, 2024
@querkmachine querkmachine mentioned this issue Aug 16, 2024
Merged
@querkmachine
Copy link
Member

Prematurely closed. Still needs #4054 to be merged.

@querkmachine querkmachine reopened this Aug 20, 2024
@selfthinker
Copy link
Contributor Author

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
Copy link
Contributor Author

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

@selfthinker selfthinker reopened this Sep 10, 2024
@calvin-lau-sig7
Copy link
Contributor

calvin-lau-sig7 commented Sep 16, 2024 •
edited
Loading

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
Copy link
Contributor Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@calvin-lau-sig7 calvin-lau-sig7

Labels
accessibility audit july 2024 Issues from July 2024 external accessibility audit against WCAG 2.2 criteria
Projects
GOV.UK Design System cycle board
Status: Done 🏁
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix non-sequential heading hierarchy on accessibility page alphagov/govuk-design-system
4 participants
@selfthinker @querkmachine @owenatgov @calvin-lau-sig7