People who use screen readers use heading levels to skim and navigate through content in a document or on a webpage. These heading levels help build structure to your digital content, and help people find the information they are looking for quickly. Because of this, making sure your heading levels are ordered chronologically is vital for improving the accessibility of your content.
By using heading labels correctly, your website and documents will be well-organized and easily interpreted by assistive technologies.
Example:
<Heading 1> Main title <Heading 1>
<Heading 2> Subheading <Heading 2>
<Heading 3> Sub subheading <Heading 3>
<Heading 3> Sub subheading <Heading 3
<Heading 2> Subheading <Heading 2>
<Heading 3> Sub subheading <Heading 3>
<Heading 3> Sub subheading <Heading 3>
Correct heading usage
- Use a single Heading 1 for the title of the page or document. Note: Content management systems (Drupal, Wordpress) often automatically assign a Heading 1 to your page title.
- Use heading levels in order and do not skip heading levels (e.g., go from an <h1> to an <h3>) because you don’t like the appearance, as screen reader users will wonder if content is missing.
- All of the Heading 1s (page titles) on your website should be unique.
- All of the H2s, H3s, and H4s on your web page or document should be unique.
- Do not use ALL CAPS. This comes across as yelling and is harder to read.
- Do not underline text to make it appear as a subheading. Underlining should only be used for active links, and assistive technologies will not interpret underlined text as a heading level.
Note: Headings aren’t just about what content looks visually. When text has a heading style applied to it, assistive technologies use them to provide users with the alternative format they need. It’s important to use accessible headings both on web pages and in documents.
Here's a text version of the content in the above image:
<Heading 1> Taking care of dogs and cats <Heading 1>
<Heading 2> Cats <Heading 2>
<Heading 3> Spoiling and caring for felines <Heading 3>
<Heading 3> How to know if your cat is hungry <Heading 3>
<Heading 2> Dogs <Heading 2>
<Heading 3> Taking care of dogs <Heading 3>
<Heading 3> Ways to play fetch <Heading 3>