1.3.1 Info and Relationships
This document gives information about the related Acquia Optimize checks:
Heading has non-empty accessible name.
Headings, including HTML headings like <h1> and <h2> and headings created with role="heading" need to have an accessible name that is defined within the HTML code of the web page. The assigned accessible name should clearly indicate the purpose of the heading for assistive software like screen readers.
Some users, such as those who are blind and use screen readers, rely on the semantic headings of the website 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 — text that can be read aloud — so that the user understands the purpose of each heading. If headings lack an accessible name, it can make it more challenging for users to understand the structure of the page and navigate through it efficiently.
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 gives some examples of the issue.
A website features an article that discusses 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 discussing 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.
Due to missing names on some of the headings, users might easily become confused about the structure and cannot tell if any content is missing.
The Optimize platform highlights headings that do not have an accessible name. This includes both HTML headings, like <h1> to <h6>, and elements that are coded as headings with the ARIA role="heading".
To fix the problem, you need to 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.
For more info please refer to the “ACT rules” section below, which includes a link to a complete technical explanation of this check.
Related accessibility conformance testing rules:
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Wed Oct 30 2024 12:16:52 GMT+0000 (Coordinated Universal Time)