Screen reader users use heading levels to skim and navigate through content. Heading levels structure your digital content, and help people find the information they are looking for. This is why it's important to use heading levels in order.
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 2: Subheading
Heading 3: Sub subheading
Heading 3: Sub subheading
Heading 2: Subheading
Heading 3: Sub subheading
Heading 3: Sub subheading
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 2: Cats
Heading 3: Spoiling and caring for felines
Heading 3: How to know if your cat is hungry
Heading 2: Dogs
Heading 3: Taking care of dogs
Heading 3: Ways to play fetch