A heading describes the content that follows it. When arriving at a new page, sighted users gravitate toward headings to quickly find what they want on the page. Screen readers and other assistive technology users can also skip from heading to heading.
This structure is especially important for screen reader users. If "normal" text is only formatted to look like a heading, e.g., by making it bold, it will not appear in this list, making it much less likely screen reader users will notice the content exists.
How do people rely on headings to navigate within web pages
- Headings create outlines and provide context for users; it allows users to navigate lengthy content easier.
- Most users skim through headings to find what they are looking for in a website, and so do most screen reader users.
- Proper headings provide a target so users can jump from heading to heading with a single keystroke.
How do people with disabilities rely on semantics in web pages to identify and understand page components
Web pages communicate not only to the user but web browsers as well through tags; tags give the content a specific purpose. For example, putting a <H1> signifies a top-level heading.
Any technology that relies on semantics to give meaning to your content will run into issues. Screen readers specifically use HTML markup to announce to users what an element’s role is and any other associated metadata. If that information is not present in your code, it will be difficult to access your content.
People with disabilities who rely on screen readers also rely on semantics in web pages to identify page components. Screen readers are also able to skip from one headline to another which helps people to navigate through the site.
Best Practices
- Always provide a descriptive page title.
- Always use heading tags for headings.
- Do not use styles to give the appearance of headings without using the proper header tag. For example, do not use color, underline, bold or italics, etc.
- A page should typically have only one <h1>. The <h1> should describe the page as a whole. On the majority of pages in the Willamette CMS, other than a few landing pages, the <h1> heading is a required field (indicated by an *) and the field itself is called "Headline".
- Headings <h2> through <h6> represent increasing degrees of "indentation" in our conceptual "outline". It is important to not skip the order to avoid confusion.
- Do not select heading levels based on their appearance. Select the appropriate heading rank in your hierarchy.
- Your webpage content should remain consistent and readable when text is resized.
Example: Good Page Structure(h2)
Real Heading (h3)
The heading above is marked as an H3. It automatically appears with the appropriate visual styles, and appears on the document outline so screen readers can jump straight to its content.
Maintaining Hierarchy (h3)
The headings below convey a nesting structure, both visually and programmatically.
Important: this explanation was placed above the sample headers for a reason: if it was below them, it would appear in the document outline as an explanation for "A nested section of the above nested section," rather than "Scenario Two: Maintaining Hierarchy."
Section 1 Nested in “Maintaining Hierarchy” (h4)
Section Nested in Section 1 (h5)
Example: Common Mistakes(h2)
Fake Headings (Bold text)
A line of bold text might look like a heading, but it will not appear in the content outline, so screen reader users cannot tell that it is important or jump to its content.
Broken Hierarchy (h4)
When you are selecting heading levels, maintain an outline-like hierarchy. Notice this heading is marked as h4, but the content does not have any h3 headings. This will put screen reader users in the confusing place of wondering if they somehow missed an important, intermediate section.
Test for Accessibility
Use SiteImprove and WAVE to check headings’ accessibility on a page. To check if headings on a page are accessible, make sure:
- All text that looks like a heading is marked up as a heading.
- The heading hierarchy is meaningful and structured properly.