Reading long, dense text without a clear outline or organization can be a daunting. Headings can make the content easier to work through and understand because of the structure provided.
Visually headings often stand out from the rest of the content. This change in appearance is not only a welcome visual break but helps readers scan the page and find what they are looking for.
For example, the headings on this help page let you know at-a-glance where to find the ways to apply heading levels and best practices for heading structure.
When created properly, headings make it easier to navigate the page. Browsers, plugins, and screen readers can use headings to go directly to a topic. For example, screen reader users can listen to a list of headings, choose to skip directly to the heading they want to go to, and start reading from there.
Heading structure
Headings should follow a sequential, descending order, and shouldn't skip a level. Numbers are used to represent the heading level where 1 is the highest level and 6 is the lowest subsection.
Most technologies, including screen readers, are limited to six levels of headings. Going beyond six levels can cause headings to not be read and should therefore be avoided.
Heading level 1 often represents the title of the web page or document. You can also think of it like the title of a book. If the book is in three acts, you'd use heading level 2 for the act headings. Heading 3 would then be used for chapter headings in each act and so on.
It's a minor issue when headings aren't in a logical order. Minor issues should still be fixed for a better experience.
Ally helps you identify when headings aren't in a logical order and explains how to fix them. Ally goes through these checks:
- Are there headings in the web page or document?
- Do the heading levels start at 1?
- Is there a logical and consistent order and hierarchy?
- Do heading levels go beyond the heading level 6?
If the content doesn't pass any of the checks, Ally marks the heading as an issue.
Use Ally to find headings not in a logical order
Use Ally's accessibility report to discover and fix accessibility issues on your site. Use the link provided for the report and sign in. Open the report and look at the list of issues in the Accessibility Issues table.
The Accessibility Issues table is in both the Overview and Domain tabs. Start in the Domain tab to see issues specific to a domain.
It's a minor issue when headings aren't in a logical order. Use the Minor tab in the Accessibility Issues table to view the list to minor issues. Select the issues with headings not in a logical order.
If you start in the Overview tab, select the issue and then the domain with the issue. Heading issues can start with Document or HTML in the list.
From the list of issues in the domain, select the score indicator next to an item with the issue. The content editor feedback panel opens.
Preview the headings not in logical order
Ally’s feedback panel shows you a preview of the content as well as detailed feedback and support to help you fix your accessibility issues. Use the preview to see the headings that aren't in a logical order.
The preview highlights where specific accessibility issues can be found in the document. Highlights show every occurrence of one issue type at a time. For example, for the issue of headings not in a logical order, the preview highlights every heading this specific issue occurs.
Preview tools
Use the preview tools to explore the issues in your document.
- Move through the preview page by page.
- See how many times a specific issue appears.
- Jump between the issue highlights.
- Hide or show the highlights.
- Zoom the preview content in or out.
- If the issue is in an attached document, download the original file.
Follow Ally's guided steps to fix heading levels
Ally assumes you have basic knowledge of HTML and how to use your Content Management System (CMS). To follow the guided steps you need to know how to edit a web page in the HTML or source code in your CMS.
Along with the preview, Ally gives you step-by-step guidance on how to fix the issue. Ally organizes this feedback in a decision tree. All you need to do is read the directions and respond to the prompts. Learn what the issue is, why it matters, and how to correct it appropriately.
Select How to fix heading order to follow the guided steps.
Ways to apply heading levels on web pages
There is more than one way to apply heading levels on your web pages.
- HTML: Ally's guided steps walks you through how to find and edit heading levels in HTML. Basically, find the web page with the heading. Edit the page. In the HTML code update the heading tag to the correct level. Save the page.
- RTE: Some CMSs have a Rich Text Editor (RTE) that may provide user-friendly ways for you to apply headings. Find the heading on the web page. Select the heading and use the CMS tools to apply a new heading level. Save the page.
Visit w3schools to learn more about HTML and CSS
Why don't I see the heading level I want to pick as an option?
Ally doesn't have control over the heading levels available in your CMS. Ally checks for a logical heading order based on the heading levels used.
It's good practice to limit the number of heading levels to six. However, it is possible you may not see all six levels in your content editor.
The number of heading levels may be defined in a site's style guide and be part of a template. Before you make any changes, check your site style guide.
In some cases higher level headings are already used as part of the CMS. For example, the title of this help page is a heading level 1. Because the title uses heading level 1, the heading levels in the editor start at level 2.
Use the heading levels available to you to create a logical heading order on the page.
Best practices on heading structure
Don't visually make headings stand out from the content with font size and color. Use the heading level options provided in your editor tool.
Always choose "Heading 1" for the highest level heading. Use "Heading 2" for section headings, "Heading 3" for subsection headings, and so on. "Normal" is used for paragraphs.
If you are updating a document, use the built-in heading styles in your word processing software.
Heading styles
Don't visually make headings stand out from the content with font size and color. It's important to use the heading levels provided in your content editor tool or the proper heading tags <h1>. The provided heading levels and tags are critical for screen readers user to navigate the page.
If you don't like the style of the heading, you might want to update the template.
Heading styles are often defined in a site's style guide and can reflect branding. Before you make any changes, check your site style guide.