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 <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.

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:

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 <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.

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

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.

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.

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 <h1> to <h6>, 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

ACT rules

Related accessibility conformance testing rules:

Heading has non-empty accessible name

Other resources

Accessible Name and Description Computation 1.1.