This document provides information about the Acquia Web Governance accessibility checks:
Are headings used for formatting?
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 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.
Why
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.
To prevent users who depend on headings for navigation from losing time, you do not apply heading codes to non-heading content. To ensure efficient navigation and content consumption, apply heading codes only to appropriate heading text.
Who
Affected users
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.
User story
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.”
Examples
This section provides 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 provides instructions on how to identify and fix this type of error.
How to identify it
The Acquia Web Governance web browser extension makes it possible to review elements on your website that are marked as headings.
How to fix it
To fix this issue with the Web Governance Web Browser Extension, follow these steps:
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 all of the elements that are highlighted by the visualization tool and make sure that they are actually 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.
This document provides information about the Acquia Web Governance accessibility checks:
Are headings used for formatting?
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 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.
Why
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.
To prevent users who depend on headings for navigation from losing time, you do not apply heading codes to non-heading content. To ensure efficient navigation and content consumption, apply heading codes only to appropriate heading text.
Who
Affected users
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.
User story
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.”
Examples
This section provides 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 provides instructions on how to identify and fix this type of error.
How to identify it
The Acquia Web Governance web browser extension makes it possible to review elements on your website that are marked as headings.
How to fix it
To fix this issue with the Web Governance Web Browser Extension, follow these steps:
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 all of the elements that are highlighted by the visualization tool and make sure that they are actually 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.
Web Governance