--- title: "Heading is missing an accessible name" date: "2024-10-25T05:38:14+00:00" summary: "Ensure all headings have accessible names for better navigation. Learn why it's crucial and how to fix empty headings on your site." image: type: "page" url: "/web-governance/heading-missing-accessible-name" id: "ac5594fd-b7dc-4aa2-9220-1e3a229a9074" --- Table of contents will be added 1.3.1 Info and Relationships Introduction ------------ This document provides information about the related Acquia Web Governance accessibility check: * Heading is missing an accessible name. What ---- Headings, including HTML headings like `

` and `

` and headings created with `role="heading"` must have an accessible name that is defined within the HTML code of the web page. The assigned accessible name must clearly indicate the purpose of the heading for assistive software such as screen readers. Why --- Some users, such as those who are blind and use screen readers, rely on semantic headings of websites for easier navigation. Screen reader software can provide a list of all headings on a page, to give users an overview of the content without the need to see the visual layout. For this to work effectively, each heading must have an accessible name, which is text that can be read aloud, so that the user understands the purpose of each heading. Headings without an accessible name can make the structure of the page difficult for users to understand and navigate. Who --- ### Affected users This check affects the following users who have: * Visual impairments: Who access the site contents with a screen reader or screen magnification software. ### 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/emulr2ozqg/web/Mon_AccessibilityHelpCenter-UserStory-WomanDoingYogaWithGirl.png?v=ab902dae-f391-4c4d-a431-77ca08d2adc6) Bridgit is a blind mother to a five-year-old girl and an 11-year-old boy: _"You know, I think people forget or just don't realize how important headings are. When I am using my screen reader, I can hit 'h' to jump to the next heading, and that’s usually how I get around on a webpage. But on some sites, it is like I am hitting a dead end when I press 'h'. It is like there is nothing there, and then I get confused, thinking I have missed some content or something.”_ Examples -------- This section provides some examples of the issue. ### Example: Headings with accessible names A website features an article about the benefits of team sports for children. The illustration shows a heading list from a screen reader program, which allows the screen reader user to get an overview of the headings in the article and their levels. ![A blog post about children sports is open in a browser. A screen reader is running on the web page. There are four headings in the article and each has been assigned an appropriate heading so the screen reader is able to show the heading structure correctly and logically.](https://acquia.widen.net/content/esosjrheb8/web/WebGov_AccessibilityGuide-Example-HeadingsWithAccessibleNames.png?w=480&v=c34a33c0-c07a-42df-a1e0-b675a278cb45&itok=orhYMSme) Each heading on the list includes text, so that the user can clearly understand what to expect from the following section. ### Example: Headings without accessible names A website features an article about the benefits of team sports for children. The illustration shows a list of headings from a screen reader program, which helps users get an overview of the article’s structure. Unfortunately, the list includes several headings without names. This issue happened because the website editor accidentally inserted blank lines in the article, and these lines were marked with heading codes. ![A blog post about children sports is open in a browser. A screen reader is running on the web page. There are four headings in the article and each has been assigned an appropriate heading. However, the author has made two line breaks in the blog post and didn't remove the H2 tag from them so the screen reader announces six headings, two of which are blank.](https://acquia.widen.net/content/nnnidd602q/web/WebGov_AccessibilityGuide-Example-HeadingsWithoutAccessibleNames.png?w=480&v=59de271b-65e2-45ce-a3fc-813e6efc5ce8&itok=vD6F1X4Q) Because there are no names on some of the headings, users might easily become confused about the structure. How --- This section provides information on how to identify and fix the issue. ### How to identify it The Acquia Web Governance platform highlights headings that do not have an accessible name. This includes both HTML headings, such as `

` to `

`, and elements that are coded as headings with the ARIA `role="heading"`. ### How to fix it To fix the problem, adjust your code so that it does not include semantic heading tags without an accessible name. In many cases you can remove HTML tags that do not contain any content. In other cases, you might need to add a descriptive text alternative to an image that is used as a heading. The _ACT rules_ section below includes a link to a complete technical explanation of this check. Additional resources -------------------- ### WCAG success criteria [1.3.1 Info and Relationship](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html) ### ACT rules Related accessibility conformance testing rules: [Heading has non-empty accessible name](https://www.w3.org/WAI/standards-guidelines/act/rules/ffd0e9/proposed/) ### Other resources [Accessible Name and Description Computation 1.1](https://www.w3.org/TR/accname/).