Incorrect heading structure
Headings should be used to create a logical structure for content. This helps users to understand the content and navigate it more easily.
The H1 of a page should describe to users what they can expect the main theme of the following content to be.
Users often skip through headings in a list to find the content they're looking for. Unique, descriptive headings make for a good user experience for screen-reader users.
Examples of issues in DfE
Below are some examples of common issues with headings and how to avoid them.
Skipped heading levels
Skipped heading levels can cause confusion for users, and from a semantic code perspective, is incorrect.
Ensure headings are used in a logical order, for example, H1 followed by H2, and H3.
You can use a tool such as Headings Map to check the heading structure of your page.
Do
Use a logical heading structure which clearly shows the hierarchy of the page.
Don't
Don't skip heading levels, this is confusing and semantically incorrect.
Use semantic heading structure
Using the correct code to create headings is important for screen-reader users. Screen readers use the code to navigate the page and understand the structure of the content.
Semantic HTML includes the use of H1 to H6 tags to create a logical structure for your content.
This is instead of styling text to look like a heading, which can be confusing for screen reader users.
The GOV.UK Design System encourages the use of H1 to H3. If content appears to have a need to go beyond an H3 level, you could look to restructure or redesign it.
You can use a tool such as Headings Map to check the heading structure of your page.
Do
Use correct HTML markup (H1, H2, H3) for headings.
Don't
Don't style paragraphs or other elements to look like headings.
Follow GOV.UK Design System guidance
The GOV.UK Design System provides guidance on the following style and structure:
Information about this page
- Created
- 13 August 2024
- Last reviewed
- 13 August 2024
- Last updated
- 13 August 2024
- Reason this page exists
- This page exists to help people understand how to prevent introducing common accessibility issues in products and services.
- Suggest a change or comment
- Issue 43