This document gives information about the related Monsido checks:
All h1 elements are not used for formatting.
All h2 elements are not used for formatting.
All h3 elements are not used for formatting.
All h4 elements are not used for formatting.
All h5 elements are not used for formatting.
All h6 elements are not used for formatting.
What
Heading codes like the html tags <h1>, <h2>, <h3> etc. must not be used to apply visual formatting to any text that is not a heading.
A heading is a section of text or content that describes what comes after it. Text is not necessarily a heading just because it visually stands out in large font, bold font, or a different color.
Why
Some users depend on the correct use of heading codes in order to navigate website content in an efficient way. For example, blind people often navigate through the website content by jumping from heading to heading until they find a relevant section to read.
If there is any part of the website content marked up with heading codes that are not applied to a heading, the users who depend on headings for navigation will have to spend much more time navigating and consuming the content.
Affected Users
This check affects the following users who have:
Sight-impairments and who navigate the site contents with a screen reader.
Motion-impairments and users that depend on keyboard or other input devices to navigate content by headings.
User Story
Bridgit is a blind mother to a five-year-old girl and an 11-year-old boy:
“When shopping for clothing I prefer to do it online. I sometimes experience shops where they use headings for the price tags, just to make the price look more prominent on the page to people who can see. If they do that, I sometimes must read through hundreds of price tags, when I really just want to jump to the heading for the next t-shirt category.”
Examples
This section gives some examples of how heading attributes can make page navigation difficult (example 1) or easy (example 2).
Example 1 (incorrect use of header tags)
This screenshot shows a product listing page from a web shop. Each item has a price tag in large red font. The price tags are incorrectly marked with <h2> heading codes to make them appear with a large bold font.
On the foreground is a headings list from a screen reader, the tool many blind people use to get an overview of webpage content and to navigate efficiently on the page. In the example above, there are several prices listed as headers with no information about the product. This kind of list makes it hard for users who depend on screen readers to navigate through the page and find a specific product category.
Example 2 (correct use of header tags)
In this example, the prices of the product are still bold, large, and with color but are formatted with text options instead of heading tags. The price tags are not marked as headings, which is the correct way to do it.
The screen reader headings list now only shows product categories and is not cluttered by the prices. This will likely improve the navigation experience for the affected users.
How
This section gives information on how to fix this type of error.
Locate the Headers on the Page
The Monsido Web Browser Extension makes it possible to review elements on your website that are marked as headers.
Open the web page.
Open the Monsido Web Browser Extension on the page.
Click Page Info (information icon) to open an overview of the webpage structure.
Expand the section to view the page headings and the number of characters.
Locate the section for Headings.
Expand the section to view the page headings and the number of characters.
Check that all of the elements that are highlighted by the visualization tool actually are headings.
Alternatively, click Toolkit (tools icon) on the Monsido Web Extension.
Turn the Headings switch ON to investigate the heading structure on the page. Headings are highlighted and also listed in HTML format.
For instructions about how to use the Web Browser Extension for this and other issues, see:
Who in your team can typically fix this
Content Authoring knowledge for headings in content.
Front end-Development knowledge for headings in website templates.
Additional Information
This section contains useful resources for this subject.
WCAG Success Criteria
Other Resources