Web Governance
Are headings used for formatting?
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 provides 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 provides instructions on how to identify and fix this type of error.
The Acquia Web Governance web browser extension makes it possible to review elements on your website that are marked as headings.
To fix this issue with the Web Governance Web Browser Extension, follow these steps:
For instructions about how to use the web browser extension for this and other issues, visit Web Governance Browser Extension.
Those with content Authoring knowledge, for headings in content.
Those with 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