Headings and Labels
Headings and labels describe topic or purpose.
What it means
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 should ensure that the image and its use as a label (in context) are 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 with text alternative of "Search" is commonly interpreted as indicating the field is for entering and submitting a search query.
Failing example
<!-- Fails: headings do not describe content -->
<h2>Section 1</h2>
<p>Details about pricing...</p>
<h2>Section 2</h2>
<p>Details about features...</p>How to fix it
<!-- Pass: headings describe topic -->
<h2>Pricing plans</h2>
<p>Details about pricing...</p>
<h2>Product features</h2>
<p>Details about features...</p>How A11yRisk detects this
A11yRisk detects this criterion automatically.
Scan your site for this violation →