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.<\/p>\n\n\n\n
This blog post will discuss headings, heading levels, and best practices concerning headings and building accessible content.<\/p>\n\n\n\n
A heading is a text that describes a section of content within a web page. The text above, \u201cHeadings explained,\u201d 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?\u201d is also a heading.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
There are six different heading levels. <\/p>\n\n\n\n
A level 1 heading, <h1>, is typically used with the document title. In the case of this article, the text \u201cWhat are headings, and how should I use them for web accessibility?\u201d is a level 1 heading.<\/p>\n\n\n\n
A level 2 heading, <h2>, is used before each major section of text. The <h2> levels above are \u201cHeadings explained\u201d and \u201cHeading levels.\u201d <\/p>\n\n\n\n
Heading level 3, <h3>, is used for any subsection, followed by <h4> (level 4), <h5> (level 5), and <h6> (level 6).<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
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:<\/p>\n\n\n\n
<h1>Title of page<\/h1><\/p>\n\n\n\n
<h2>Main heading<\/h2><\/p>\n\n\n\n
<h2>Another main heading<\/h2><\/p>\n\n\n\n
<h3>Sub-heading<\/h3><\/p>\n\n\n\n
<h2>Yet another main heading<\/h2><\/p>\n\n\n\n
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. <\/p>\n\n\n\n
Screen reader users can use keyboard shortcuts to navigate by heading levels. \u201c1\u201d is used to skip to the next <h1>, \u201c2\u201d to skip to the next <h2>, and so on for <h3> through <h6>. <\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Below is an example of proper heading-level structure: <\/p>\n\n\n\n
<h1>Whole Foods Market<\/h1><\/p>\n\n\n\n
<h2>Produce<\/h2><\/p>\n\n\n\n
<h3>Fruits<\/h3><\/p>\n\n\n\n
In the example, \u201cWhole Foods Market\u201d (the document title) is a level 1 heading. \u201cProduce\u201d (a main section) is a level 2 heading, and \u201cFruits\u201d (a subsection of \u201cProduce\u201d) is a heading level 3. <\/p>\n\n\n\n
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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
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. <\/p>\n\n\n\n