Understanding Headings and Labels

In brief

Goal
A page's content is described in headings and labels
What to do
Provide descriptive headings and labels
Why it's important
People can orient themselves, especially those with cognitive or visual disabilities.

Intent of Headings and Labels

The intent of this Success Criterion is to help users understand what information is contained in Web pages and how that information is organized. When headings are clear and descriptive, users can find the information they seek more easily, and they can understand the relationships between different parts of the content more easily. Descriptive labels help users identify specific components within the content.

Labels and headings do not need to be lengthy. A word, or even a single character, may suffice if it provides an appropriate cue to finding and navigating content.

Labels of form controls are usually text-based. In some cases, images can serve as descriptive labels without additional text. In these cases, authors would need to ensure that the image and its use as label in a particular context can be considered conventional and widely understood. Note that the same image can be interpreted differently in different contexts. However, it can still be considered descriptive if its use is commonly understood in each context. For example, when accompanying a text field, a loupe or magnifying glass icon is commonly interpreted as indicating the field is for entering and submitting a search query. Placed on or near another image, a loupe or magnifying glass icon is commonly interpreted as a means to view a magnified version of the image (for instance, acting as a mechanism to zoom into the image, or opening a full-sized image in a new window).

This Success Criterion does not require headings or labels. This Success Criterion requires that if headings or labels are provided, they be descriptive. This Success Criterion also does not require that content acting as a heading or label be correctly marked up or identified – this aspect is covered separately by 1.3.1: Info and Relationships. It is possible for content to pass this Success Criterion (providing descriptive content that acts as headings or labels) while failing Success Criterion 1.3.1 (if the headings or labels aren't correctly marked up/identified). Conversely, it is also possible for content to pass Success Criterion 1.3.1 (with headings or labels correctly marked up or identified), while failing this Success Criterion (if those headings or labels are not sufficiently clear or descriptive).

Further, in the case of labels, this Success Criterion does not take into consideration whether or not alternative methods of providing an accessible name for form controls and inputs has been used – this aspect is covered separately by 4.1.2: Name, Role and Value. It is possible for controls and inputs to have an appropriate accessible name (e.g. using aria-label="…") and therefore pass Success Criterion 4.1.2, but to still fail this Success Criterion (if the label is not sufficiently clear or descriptive).

This success criterion does not require the use of labels; however, it does require that if labels are present, they must be sufficiently clear or descriptive. Please see 3.3.2: Labels or Instructions for more information on the use of labels.

Benefits of Headings and Labels

Examples of Headings and Labels

A news site
The home page of a news site lists the headlines for the top stories of the hour. Under each heading are the first 35 words of the story and a link to the full article. Each headline gives a clear idea of the article's subject.
A guide on how to write well
A guide on writing contains the following section titles: How To Write Well, Cut Out Useless Words, Identify Unnecessary Words, and so on. The section headings are clear and concise and the structure of the information is reflected in the structure of the headings.
Consistent headings in different articles
A Web site contains papers from a conference. Submissions to the conference are required to have the following organization: Summary, Introduction, [other sections unique to this article], Conclusion, Author Biography, Glossary, and Bibliography. The title of each Web page clearly identifies the article it contains, creating a useful balance between the uniqueness of the articles and the consistency of the section headings.
A form asking for the name of the user
A form asks for the name of the user. It consists of two input fields to ask for the first and last name. The first field is labeled First name, the second is labeled Last name.
A search field labeled by a magnifying glass icon
A search text input is followed by a button containing a magnifying glass icon that activates the search function. The icon has the string "search" as programmatically determinable label.

Resources for Headings and Labels

Techniques for Headings and Labels

Sufficient Techniques for Headings and Labels

Headings and labels must be programmatically determined, per Success Criterion 1.3.1.

Additional Techniques (Advisory) for Headings and Labels

Failures for Headings and Labels