Web Governance
All headings have a name
1.3.1 Info and Relationships
This document provides information about the related accessibility checks:
Heading has non-empty 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.
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.
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.
The 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, this just means removing 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