--- title: "Are headings used for formatting?" date: "2024-08-16T07:03:36+00:00" summary: "Learn how to properly use heading codes for accessibility, improving navigation for users with sight and motion impairments." image: type: "page" url: "/web-governance/are-headings-used-formatting-0" id: "28b993ff-b4d2-4089-a8fa-1483fce8eb86" --- Table of contents will be added **1.3.1 Info and Relationships** Introduction ------------ 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 `

`, `

`, `

` 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 ![Woman smiling while doing yoga, with a child playfully climbing on her back in a cozy living room.](https://acquia.widen.net/content/ab902dae-f391-4c4d-a431-77ca08d2adc6/web/Mon_AccessibilityHelpCenter-UserStory-WomanDoingYogaWithGirl.png) 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 `

` 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. ![Website page showing a "Footwear store" with images of four types of shoes and prices. Sidebar lists website headings and prices. Example of incorrect use of header tags.](https://acquia.widen.net/content/10340ad9-b228-4a7e-9baa-b41f19228f24/web/Mon_sole-mates-example-footwear-store-incorrect-use-of-header-tags.png?w=480&itok=X3STFf7x) ### 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. ![Screenshot showing a product listing page from a web shop using correct header tags.](https://acquia.widen.net/content/375ed522-8f73-43cd-98c7-d4660337fd98/web/Mon_sole-mates-example-footwear-store-correct-use-of-headings-tags.png?w=480&itok=wmAQ4EVt) 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: 1. Open the web page. 2. Open the Web Governance Web Browser Extension on the page. 3. Click **Page Info** (information icon) to open an overview of the webpage structure. 4. Expand the section to view the page headings and the number of characters. 5. Locate the section for **Headings.** 6. Expand the section to view the page headings and the number of characters. 7. 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. 8. 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 [Web Governance Browser Extension](/web-governance/web-governance-browser-extension "Web Governance Browser Extension"). ### Who in your team can typically fix this * Those with content Authoring knowledge, for headings in content. * Those with front-end development knowledge, for headings in website templates. Additional resources -------------------- This section contains useful resources for this subject. ### WCAG success criteria * [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html) ### Other resources * [Headings (W3C tutorial)](https://www.w3.org/WAI/tutorials/page-structure/headings/)