The proper use of headings when creating a webpage is essential to website accessibility. Proper heading structure is one of the first steps to take to achieve a fully accessible, easy-to-read document.
This blog post will discuss headings, heading levels, and best practices concerning headings and building accessible content.
Headings explained
A heading is a text that describes a section of content within a web page. The text above, “Headings explained,” is a heading because it describes this section of text explaining headings. The blog post’s title, “What are headings, and how should I use them for web accessibility?” is also a heading.
When used properly, headings can provide multiple benefits. They can make it easier for screen reader users to search web pages or digital documents for specific content. Screen readers can navigate by headings and heading levels, allowing users to jump directly to the information they need without listening to the entire page.
Headings also help visually separate text, which can be particularly useful for individuals with cognitive disabilities. These users and many others may need assistance focusing on the content without these visual separators.
Heading levels
There are six different heading levels.
A level 1 heading, <h1>, is typically used with the document title. In the case of this article, the text “What are headings, and how should I use them for web accessibility?” is a level 1 heading.
A level 2 heading, <h2>, is used before each major section of text. The <h2> levels above are “Headings explained” and “Heading levels.”
Heading level 3, <h3>, is used for any subsection, followed by <h4> (level 4), <h5> (level 5), and <h6> (level 6).
Best practices regarding headings
Make sure each page or document has a heading level 1
Each webpage or document must have one (and only one) <h1>. An <h1> is typically used to mark the title or primary purpose of the webpage as a semantic heading so that screen reading software will recognize it as a heading. This makes it much easier for a screen reader user to identify what the web page or document is about. If there is no <h1>, a screen reader user may have to identify the document’s main topic independently. It is also essential that the <h1> matches the document’s title, or at least very closely matches it.
Below is an example of how heading levels could appear on a webpage when built with accessibility in mind, leveraging just a singular <h1> heading level:
<h1>Title of page</h1>
<h2>Main heading</h2>
<h2>Another main heading</h2>
<h3>Sub-heading</h3>
<h2>Yet another main heading</h2>
Headings must be used in a logical order
Web development teams must mark up headings in the correct order. As explained above, <h1s> are used for the main purpose of documents. <h2s> are used for main sections, <h3s> for subsections, and so on through <h6s>. Heading levels cannot be skipped. For example, only <h2s> should typically follow <h1> in heading level structure.
Screen reader users can use keyboard shortcuts to navigate by heading levels. “1” is used to skip to the next <h1>, “2” to skip to the next <h2>, and so on for <h3> through <h6>.
Correct heading level order makes skimming webpages for relevant content much easier for screen reader users and creates a more equitable experience when browsing the web.
Below is an example of proper heading-level structure:
<h1>Whole Foods Market</h1>
<h2>Produce</h2>
<h3>Fruits</h3>
In the example, “Whole Foods Market” (the document title) is a level 1 heading. “Produce” (a main section) is a level 2 heading, and “Fruits” (a subsection of “Produce”) is a heading level 3.
Make sure webpage headings are actual headings.
Ensure all document and page headings are actual headings. For example, all <h1> headings should be actual level 1 headings used primarily for the document’s main purpose. When elements that should be different from headings are marked up as headings, it can confuse screen reader users. Screen reader users can navigate by headings, so screen readers will read content as a heading that sighted people know is not a heading. This makes for an inequitable experience, as screen reader users do not have accurate information.
Conversely, actual semantic headings should always be marked up as headings. For example, all text marked as <h1> should be an actual semantic level 1 heading and not regular paragraph text (or another heading level). This also creates confusion for screen reader users, as they may think text not meant to be a heading is one because of incorrect markup. In addition, if used in this way, it would provide screen reader users with inaccurate information.
More about headings
While headings can be styled in any way depending on the layout of a particular webpage or document, following these best practices in heading markup is crucial in providing an organized and easily navigable layout. While screen reader users benefit the most from proper heading markup, users with cognitive disabilities also benefit from the clear organization provided by headings.
Our team at Allyant has also built a robust accessibility tool specifically for testing and updating heading levels, allowing content managers and developers of all accessibility experience levels to efficiently and effectively ensure they are building accessible heading structures.
Contact our expert digital accessibility auditing team with any questions regarding headings or heading-level structure or to receive a demo of our heading-level tool!
