Use Headings and Labels Correctly to Describe Topics and Purpose

Disabilities Affected: Cognitive, Mobility, Visual

Success Criterion: 2.4.6

Level: AA

Use headings (<h1> – <h6>) to structure content logically and describe the topic or purpose of the content that follows. Use labels (<label>) or other descriptive techniques (like aria-label, aria-labelledby) to identify form controls clearly. Headings and labels should be descriptive and accurately reflect the content or control they relate to.

Why It Matters

Screen reader users rely heavily on headings to understand the structure of a page and navigate quickly to different sections. Clear labels are essential for understanding the purpose of form fields. Users with cognitive disabilities also benefit from well-structured content and clear labels.

Fixing the Issue

Organize content using headings in a logical hierarchical order (don’t skip levels, e.g., <h1> followed by <h3>). Ensure heading text accurately describes the subsequent section. For forms, use the <label> element and associate it with its control using the for attribute matching the control’s id. If a visible label isn’t feasible for design reasons, use aria-label or aria-labelledby on the control itself. Placeholder text is not a substitute for a label.

Good Code Example

Proper use of headings for structure and labels for forms:

Markup

<h1>Page Title</h1>
<section>
  <h2>Section 1: Introduction</h2>
  <p>Content...</p>
  <h3>Subsection 1.1</h3>
  <p>More content...</p>
</section>
<section>
  <h2>Section 2: Details</h2>
  <p>Details here...</p>
</section>

<label for="user-name">Name:</label>
<input type="text" id="user-name" name="username">

<input type="search" id="search-term" name="query" aria-label="Search website">
<button type="submit">Search</button>

Bad Code Example

Incorrect heading structure and unlabeled form inputs:

Markup

<h1>Page Title</h1>
<h3>A Subsection</h3>
<p>Content...</p>
<p style="font-size: 24px; font-weight: bold;">This Looks Like a Heading But Isn't</p>

<input type="text" id="email-address" name="email">

<input type="password" id="user-pass" name="password" placeholder="Password">

Search Ultimate Guide

Free eBook

Integrating Accessibility Compliance Into Your Budget

A practical guide for healthcare leaders navigating WCAG compliance.

Learn More

Need help with digital accessibility?

Our team is here to guide you through the process of meeting accessibility standards. Contact us today to get started.

Schedule Consult