Headings

Requirements

All headings can be identified through heading markup.
Headings are not used to convey structure and hierarchy and not simply to achieve a visual effect.
A logical hierarchy of headings is used that conveys the structure of information on the page.
Lists can be identified by assistive technologies.
List markup is not used for formatting.

Full explanation

Headers should be logical and consistent across a site, reflect the structure of information on the page and should be used to briefly introduce the topic(s) that follow them. Headers should not be used where they do not precede a specific topic or where they would be immediately followed by headers of the same level.

Headings must be presented in a logical and hierarchical order, primarily to make it easy for screen readers to navigate the page. Screen reader users can make use of headings to jump to relevant content within the document and greatly reduce the time that they spend looking for content on a page.

Lists should be used appropriately and identified using list markup. This markup provides essential information to assistive technologies.

Information and Relationships

1.3 Adaptable structure and headings

Content’s structure and information must be able to be presented in different ways so that it can be perceived by all users through the software or devices they use, e.g. through a standard browser, a phone or computer screen, a Braille display, or a screen reader.

Headings and Labels (AA)

Headings and labels used in the page must describe the topic or purpose of the information they are attached to. When headings and labels are clear and descriptive, people can more easily find and interact with the information and controls on a page. Note that this success criterion does not require that headings and labels be provided. It only requires that any headings or labels that are provided are properly descriptive of topic or purpose.

Also note that this success criterion is not headings and labels being properly marked up using appropriate HTML elements. That is covered by success criterion 1.3.1 Info and Relationships to help people find the information they need with minimal effort, and to understand what information is on a website and how it is organised.

Example

<h1>Heading for main content</h1>
<h2>Subheading for h1</h2>
<h3> Subheading for h2</h3>
<h4> Subheading for h3</h4>

<h2> Subheading for h1</h2>
<h3> Subheading for h2</h3>
<h4> Subheading for h3</h4>

<h2> Subheading for h1</h2>
<h3> Subheading for h2</h3>
<h4> Subheading for h3</h4>

Test at the same time

1.3.1 Info and Relationships

Notes

While the label element can be used to mark up a label for a form control, not all labels use the label element.

How to test

Open the web page to be tested.
Find the headings on the page. Check that they clearly describe the content they apply to, are meaningful, and are used consistently.
A label is some text or image with a text alternative that is presented and available to all users. Find the labels used to identify components on the page. Check that they make it easy to understand what each labelled element is or does and are used consistently.

Potential access issues

Headings do not describe the content of the sections of the page that they apply to.
Labels do not describe or summarise their purpose and are not applied consistently.