Nested Headings
William Goggins
Web Assistant
Everything Nested Headings. Workflow will pester you less if you nail this way of formatting page text.
Nested Headings
Hello everyone. My name's Will and I'm the new placement student in WebTeam. Today I'm going to be talking about nesting headings on T4. I hope this is useful.
Why is this important?
- When formatting information on a page it is important to consider how the user will see and interact with what you are showing.
- The main reason to nest headers is to aid in accessibility. Google loves accessability.
Siteimprove Criteria
Description
- The headings on the page must be hierarchically organized.
- Think of headings as sign posts providing users context.
- Screen readers often use a shortcut allowing users to view a list of all headings found on the page. The screen reader uses the heading code (H1-H6 and WAI-ARIA headings and their 'aria-level') to create this list. Some users also tab through the headings of a page.
- Heading codes used in the proper order will give an accurate 'picture' of what is on the web page.
How to fix it:
- Headings must not skip levels.
- There must be at least one top level heading (H1 or WAI-ARIA role="heading" with a aria-level="1") present on the page and sub headings for this must be H2 or WAI-ARIA role="heading" aria-level="2" and so on.
When to use nested headings?
All the time!
For any page you create you need to be using nested headings to separate and group information. However this doesn’t only apply to the body of a page. You also need to apply this concept with group blocks. If a group block belongs to a subheading above, its header will be the next header size down. However when creating a modal inside a group block, the heading for the modal can reset to a h2 as it is in a new window.
Example site
This is an example site of nested headings being used.
If you have any issues getting to grips with nesting headings please feel free to contact a member of WebTeam and we will do our best to help.
TL;DR
- Nesting Headers is important for accessability.
- Headers must be organized into a hierarchy.
- Headers act as sign posts providing context to users.
- Headers must not skip levels and there must be at least one top heading as a h1.
- Use nested headings for all pages. Even when using group blocks. However modal headers can be reset to h2.
- If you have any issues get in touch with the WebTeam.
Resources