Heading Structure
Accessible Heading Structures
Creating a proper heading structure is one of the most important steps you can take to make your pages easier to navigate. It helps visitors who use assistive technologies understand the organization of your content while also creating a clear hierarchy that makes pages easier for everyone to scan and follow.
Accessible heading structures are not just an accessibility best practice—they are an important part of a positive overall user experience.
Heading Structure Video Tutorial
In this tutorial, you’ll learn why proper heading structure is essential for an accessible, well-organized website and how to use Siteimprove to find heading issues. Fixing these is a high-impact accessibility improvement that helps all users navigate and understand your content more easily—not just those using assistive technologies.
What is Heading Structure?
Headings organize the content of a web page or document in a similar manner to a table of contents or an essay outline. Headings are hierarchical with the Heading 1 (H1) representing the main idea and sub-sections marked with H2, the subsections of an H2 marked as H3, etc. They may have a visual element to show difference, but headings should only be used to mark structural sections, not just for visual appeal.
Well-structured headings help screen reader users scan for information and are essential to allow assistive technology users to access website information quickly. These structured headings tell everyone, including those using assistive technology, what subsections or subtopics are part of other higher-level topics.
How to Properly Use Headings
Whenever your page includes content that requires structure and organization, use a Heading 2 (H2) to identify the section. From there, you can use additional headings, such as Heading 3 (H3) or Heading 4 (H4), to organize content that serves as a subtopic of the section immediately above it.
Headings should always follow a logical hierarchy and should never be placed out of order. For example, an H3 should follow an H2, an H4 should follow an H3, and so on. Maintaining a consistent heading structure makes your content easier to scan, understand, and navigate for all users.
Heading 1 (H1)
Reserved exclusively for the page title. Do not use additional H1 headings within the page content.
Heading 2 (H2)
Used to organize the primary sections or main topics of the page. Most content should be grouped under H2 headings.
Heading 3 (H3)
Used for subsections that expand on or support the topic introduced by the preceding H2 heading.
Heading 4 (H4)
Used for additional details or subtopics related to the preceding H3 heading.
Heading 5 (H5)
Used only when further organization is needed beneath an H4 heading.
Heading 6 (H6)
Reserved for the most detailed level of content and should be used sparingly, only when additional hierarchy is necessary beneath an H5 heading.
Fixing Heading Structure Issues
Use the step-by-step guide below to learn how to review and fix heading structure issues on your site. Please note that this guide is intended as a supplemental resource and is not a substitute for formal Siteimprove training offered by UMC and Information Systems.
If you have access to Siteimprove but have not yet completed formal training, please schedule a training session. We’ll help you become familiar with the platform and ensure you have the knowledge and resources needed to use it effectively.
Accessibility Report Dashboard
Once you’re logged into Siteimprove, choose the site you want to work on and then select the Accessibility Report Dashboard from the dropdown menu.
Any accessibility issues that appear on your site will appear either within the Issues or Potential Issues reports. (PDFs are listed separately along with their accessibility information.)
Identifying Heading Structure Issues
Select a particular issue involving headings that you want to address. In this tutorial we’re going to explore “Headings are not structured” and begin working on fixing these issues.
Once selected, you will be redirected to a screen that shows you the URL of every page on your site that has been flagged as having that particular improper use of headings.
Affected Pages
Here you’ll see all pages on your site that have been flagged for using improper headings.
Select a page to identify where improper heading structure occurs and determine the steps needed to fix it.
Fixing the Issue
A new tab will open and you’ll be redirected to a screen that loads the page in the Siteimprove interface with the heading issue(s) highlighted with a red box. (In the case of headings, using the “Show HTML” button at the top may be more useful than the “Show page content” view.)
The page offers you information on why this is an issue and examples of good code.
To begin the heading remediation process, click on the CMS button at the top of the page.
Note: You’ll need to be logged into your WordPress site for this to work.
This will redirect you to the backend of the page in WordPress. From here you can correct the heading level and save the page once you’re done.
Click Update on your webpage before exiting. When you’ve made the change, you can close the browser tab.
To fix additional heading structure challenges, go back to the Accessibility Report and select the next issue or to the page list to select the next URL for the same issue.
Note: There may be instances where the page has different content blocks that use headings that don’t follow the hierarchical order of the headings on your page. These may or may not need to be changed. If you’re unsure if you should change a flagged heading for this reason, please contact the digital team or Technology Accessibility Team for help.
Your Siteimprove Toolbox
Quality Assurance
Discover the steps you can take to create a more effective, engaging, and user-friendly website experience for everyone.
Analytics
A successful content strategy starts with understanding how your website is performing and what your audience is looking for.
Accessibility
Accessibility isn’t just about what happens behind the curtain—it’s about the experience everyone has in front of it.
SEO & Search
Understanding how visitors find your website and what they want is an essential step in developing an effective content strategy.
Online Presentations
Whether you’re planning to attend an upcoming digital strategy presentation or want to revisit a previous session, explore the topics we cover and resources we share.
Digital Strategy
A strong digital strategy serves as the foundation for your website and every aspect of your digital marketing and communications. Here’s what you need to know.
Want to Chat?
We’re here to support your digital strategy efforts. Reach out with questions or schedule a consultation to discuss your website strategy and explore opportunities for improvement.