Web Governance
Heading code is not used for visual formatting only
1.3.1 Info and Relationships
This document provides information about the related accessibility 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.
Heading codes such as the html tags <h1>, <h2>, <h3> and similar 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.
Some users depend on the correct use of heading codes to navigate website content in an efficient way. For example, blind people often navigate through the website content with the Tab function to jump from heading to heading until they find a relevant section to read.
Website content that is marked up with heading codes that are not applied to a heading results in time lost due to navigational and content consumption issues for users who depend on headings for navigation.
This check affects the following users who have:
Sight impairments: Who navigate the site contents with a screen reader.
Motion impairments: And other users that depend on keyboard or other input devices to navigate content by headings.
Bridgit is a blind mother to a five-year-old girl and an 11-year-old boy:
“When I shop 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.”
This section gives some examples of how heading attributes can make page navigation difficult (example 1) or easy (example 2).
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.
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.
This section gives information on how to fix this type of error.
The Web Governance web browser extension makes it possible to review elements on your website that are marked as headings.
Open the web page.
Open the Web Governance 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 Web Governance web browser 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, visit:
Content Authoring knowledge for headings in content.
Front end-Development knowledge for headings in website templates.
This section contains useful resources for this subject.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Web Governance