Headings make up the structure of our web content. They improve readability, help users instantly know what the content is about, and even help with SEO.
When it comes to accessibility, headings do even more than that. But, don’t worry, the great part about heading accessibility is once you know the dos and don’ts, it’s easy to start applying it to your own website.
In this article we’ll go over:
Rather watch a video on headings? Watch our Check heading accessibility using the WAVE tool video to learn why headings matter and watch two examples of how headings are used to navigate with Mac’s VoiceOver screen reader. We’ll also show how to use WebAIM’s WAVE tool.
What is a heading structure?
Documents and web content use headings to organize content on a page. Ideally, headings are designed in a way that makes them stand out from the paragraph text. For example, they are usually larger than other text. This makes the different headings easier for visual users to see, which makes it quicker for them to read and find information.
We often see pages that treat headings as a list. So, they start with heading 1, then heading 2, then heading 3, and so on. But, the level of the heading really depends on the level of the topic.
For example, there’s one heading 1 that describes the entire page. Next, heading 2s are some of the broader main ideas. Then, heading 3s can be used under heading 2s for even more specific ideas. Once we’re done, we go back to a more broader topic with a heading 2.
Example heading structure
Heading structure can be easiest to understand with an example, so let’s look at part of this page. Below are some of the headings we used. Notice how we have one heading 1, which is the page title. Next, we use heading 2s for broader main ideas and heading 3s for more specific topics under that. Then, we go back to a heading 2.
- Heading 1: 5 heading accessibility issues and how to fix them
- Heading 2: What is a heading structure?
- Heading 3: Example heading structure
- Heading 2: How headings help web accessibility
- Heading 2: Empty heading
- Heading 3: Empty heading example
- Heading 3: Fix an empty heading
- Heading 2: No heading structure
- Heading 2: What is a heading structure?
Now that we’re familiar with heading structure, let’s learn how headings affect accessibility.
How headings help accessibility
Visual users scan headings to quickly understand what the content is about, how it’s organized, and then navigate to the information they’re looking for.
Similarly, assistive technology users get a sense of the page’s layout through the heading structure and also navigate pages by headings.
According to WebAIM’s screen reader user survey, 68.8% of the 1,224 respondents use headings to navigate pages.WebAIM’s screen reader user survey
A clear heading structure can go a long way in helping assistive technology users navigate your web pages.
Watch the video below for an example of a screen reader using the heading structure to navigate a page.
Without a heading structure, assistive technology users would have to listen to all the content to understand what’s on the page. Then, going back and finding content to re-listen to can be extremely difficult.
With a heading structure, the user can use the headings to quickly get a sense of what the page is about and then easily navigate.
To make sure we keep our heading structures accessible, let’s learn about the five heading accessibility issues and how to fix them. These are issues Pope Tech and WebAIM’s free WAVE tool automatically test for.
An empty heading means a heading element is in the HTML, but there is no content. The HTML would look like this:
Sometimes, content editors purposefully add a blank heading to create a large blank space without knowing that it actually causes accessibility problems.
Fix an empty heading
Fixing an empty heading is easy. All you need to do is either add content to the heading or remove the empty heading.
If the heading was used to create space, use HTML and CSS to create the space instead. Or, if you use a CMS like WordPress, there are spacer or separator blocks that can be used to create blank spaces.
No heading structure
No heading structure means there are no headings (h1s – h6s) on the page. Most web pages should have even a simple heading structure to make it easy for all users, but especially assistive technology users, to navigate the page.
Fix no heading structure
To fix no heading structure, simply add headings. Typically, you’ll have one heading 1 for the page’s title, and then sub-headings to split up the content from there. Check out our example heading structure above to learn more about how to use sub-headings.
Missing first-level heading
Missing first-level heading means the heading 1 is missing from the page. Most pages, including home pages, should have a heading 1 to tell users what the page is about. If you use a CMS, the page title field is usually the page’s heading 1.
First-level heading on home page example
Here’s an example of a heading 1 on Pope Tech’s home page. The heading 1 is actually the logo text in the banner at the top of the page. Visually, it might not look like a heading 1. But, it has HTML that makes it one, which helps assistive technology users know immediately what this website is about.
Fix missing first-level heading
To fix a missing first-level heading, just add a heading 1 to the page. The heading 1 should come before any other headings.
Skipped heading level
Skipped heading level means a heading level was skipped in the hierarchy. For example, going from a heading 1 to a heading 3 would be a skipped heading level. Or, going from a heading 2 to a heading 4.
This happens a lot when content editors or developers use headings for styling. For example, the text needs to be larger, so they use a heading 4 or 5 to make the text bigger. This could cause a skipped heading level. But, even if it doesn’t, this is confusing because paragraph text is now part of an assistive technology user’s heading list, which they use to navigate.
Skipped heading level example
Watch the video below for an example of a screen reader user coming across a skipped heading level and paragraph text that uses a heading to be larger.
Assistive technology users rely on hearing the page’s structure to understand the page’s layout. When a heading is skipped, the user might think they missed a heading or aren’t able to access it. Or, if headings were used to make paragraph text larger throughout the page, their heading list that’s used to navigate becomes cluttered and unhelpful.
Fix skipped heading level
Fixing a skipped heading level can be as easy as changing the heading. For example, if it goes from heading 2 to heading 4, change the heading 4 to a heading 3.
If you’re using headings to make text larger, instead, use CSS to make larger text. Or, if you use a CMS, look to see if there are text size fields to make the paragraph text bigger.
Possible heading means the text is large paragraph text that might need to be changed to an actual heading. Visually, the text might look the same – the difference is in the HTML code.
Possible heading example
In the code below, the heading text is between a heading 2 HTML element. This means the heading will show up in an assistive technology user’s heading list, so they can hear and navigate to it.
Now, this code has the heading in a paragraph element with styling that makes it larger to match the headings. Because it’s techncally paragraph text, the heading won’t show up in the heading list.
<p style="font-size: 2.5em">Possible heading</p>
Fix possible heading
Before fixing a possible heading, first determine if the text should be a heading or not. If it shouldn’t be, you could leave the text as is. But, you should consider if the design is confusing for visual users if it looks like other headings.
If it should be a heading, either update the code to a header element or apply a heading tag using your CMS’s editor.
Make headings accessible in your own content
If you’re ready to start making headings accessible on your website, here’s how you can get started:
- Identify any heading-related errors or alerts in your content using Pope Tech’s website scanning tool or the Canvas Accessibility Guide. If you don’t have these tools, you can use WebAIM’s free WAVE extension tool.
- Fix ten heading errors or alerts.
- If there were more than ten issues, make an achievable goal and share that goal with your team or office.
- BONUS: If you don’t have one already, schedule a monthly accessibility check-in (even if it’s just you) to celebrate progress and remove blockers.
Here’s a video on how to use the WAVE extension tool to find heading issues:
Great! Even small steps are progress toward a more accessible website.
For more information about accessible heading structures, check out these resources:
- Heading structure, or heading hierarchy, organizes the page’s content.
- Page’s should have one heading 1 that describe the entire page’s content. Heading 2s are used after the heading 1 for broader main ideas within the page’s topic. Then, heading 3s are used for even more specific ideas within the heading 2.
- Headings matter for accessibility because according to WebAIM’s screen reader user survey, 68.8% of the 1,224 respondents use headings to navigate pages.
- Don’t use headings to style web pages. For example, using a heading to create a larger space or using a heading to make paragraph text larger.
Want to be part of the conversation?
Share questions, feedback, and experiences on Twitter
Sign up for our newsletter to get emails with accessibility content similar to this article. If you subscribe, we’ll email you web accessibility insights or things we learn a few times a month. You can unsubscribe at any time.