Disabilities Affected: Cognitive, Mobility, Visual
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:
-
<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:
-
<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">
