WCAG (Level AA) SC 2.4.6 Headings and Labels (W3.org)
Issue description
WCAG 2.4.6, “Headings and Labels” focuses on making sure headings and labels are used correctly to organize content and provide clear descriptions for all users, including those who rely on assistive technologies like screen readers. Many websites have issues with headings and labels, such as:
- Missing headings: Sections of content lack headings, making it difficult to understand the structure and hierarchy of the information.
- Incorrect heading levels: Headings are used in the wrong order (e.g., an
<h3>before an<h2>), disrupting the logical flow and making it hard to understand the relationships between sections. - Non-descriptive headings: Headings are vague or don’t accurately describe the content that follows them.
- Missing labels: Form fields lack labels, making it unclear what information should be entered.
- Incorrectly associated labels: Labels are not properly associated with their corresponding form fields, making it difficult for assistive technologies to understand the relationship.
Why headings and labels matter
- Structure and organization: Headings create a clear structure and hierarchy for the content, making it easier to understand and navigate.
- Accessibility: Assistive technologies rely on headings and labels to convey the structure and meaning of the content to users.
- Cognitive differences: Clear headings and labels aid users with cognitive disabilities in understanding the organization and purpose of the content.
- Usability: Well-structured content with descriptive headings and labels improves the overall usability of the website for everyone.
Essentially, WCAG (Level AA) SC 2.4.6 Headings and Labels ensures that headings and labels are used correctly to provide a clear and understandable structure for all users. This makes the content more accessible, navigable, and user-friendly.
Related requirements
The following WCAG source criteria are often related to this as well. They can provide additional insights into specific challenges you may be encountering.
- WCAG (Level A) SC 1.3.1 Info and Relationships
- WCAG (Level A) SC 1.3.2 Meaningful Sequence
- WCAG (Level AAA) SC 2.4.10 Section Headings
- WCAG (Level A) SC 2.5.3 Label in Name
Read our posts: Put Down the Bold: What You Really Want Is a Heading and Headings Are Vital for Accessibility and SEO.
Who this issue impacts
Follow the links for additional information on user impairments:
Suggestions for remediation
Remediating WCAG 2.4.6, “Headings and Labels” involves ensuring that headings and labels are used correctly to structure content and provide clear descriptions. Here’s how:
Headings
- Use headings to structure content: Use heading tags (
<h1>to<h6>) to create a clear and meaningful hierarchy of information. - Correct heading order: Use heading levels in the correct order, starting with
<h1>for the main heading,<h2>for subheadings,<h3>for sub-subheadings, and so on. Avoid skipping heading levels. - Descriptive headings: Use concise and descriptive headings that accurately reflect the content that follows them.
- Visual consistency: Use CSS to style headings consistently to provide visual cues about the structure.
Labels
- Provide labels for all form fields: Ensure that every form field has a visible label that clearly identifies its purpose.
- Associate labels with fields: Use the
<label>element with theforattribute to programmatically associate labels with their corresponding form fields. Theforattribute of the<label>should match theidattribute of the form field. - Placement: Place labels close to the form fields they relate to, typically above or beside the field.
Testing
- Visual inspection: Visually inspect the page to ensure headings are used correctly and labels are properly associated with form fields.
- Screen reader testing: Test the page with a screen reader to ensure that the headings and labels are conveyed correctly and provide meaningful information to users.
- Keyboard navigation: Use the keyboard to navigate through the page and verify that the headings and labels provide clear context and guidance.
Examples
- Instead of:
<span style="font-size: 24px; font-weight: bold;">Important Information</span>
Use:<h2>Important Information</h2> - Instead of:
<input type="text" name="name" placeholder="Your Name">
Use:<label for="name">Your Name:</label> <input type="text" id="name" name="name">
By following these practices, you can create content that is well-structured, easy to understand, and accessible to everyone, including those who rely on assistive technologies.
