Web Governance
Heading is missing an accessible name
1.3.1 Info and Relationships
This document provides information about the related Acquia Web Governance accessibility check:
Heading is missing an accessible name.
Headings, including HTML headings like <h1> and <h2> 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.
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.
This check affects the following users who have:
Visual impairments: Who access the site contents with a screen reader or screen magnification software.
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.”
This section provides some examples of the issue.
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.
Each heading on the list includes text, so that the user can clearly understand what to expect from the following section.
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.
Because there are no names on some of the headings, users might easily become confused about the structure.
This section provides information on how to identify and fix the issue.
The Acquia Web Governance platform highlights headings that do not have an accessible name. This includes both HTML headings, such as <h1> to <h6>, and elements that are coded as headings with the ARIA role="heading".
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.
Related accessibility conformance testing rules:
Heading has non-empty accessible name
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