WCAG – 2.4.6 Headings and Labels (Level AA)

2.4.6 Headings and Labels: Headings and labels describe topic or purpose. (Level AA)

Requirements

  • Make sure that elements that are identified as headings in code describe the purpose or topic of the content that follows;
  • Make sure that elements that are identified as labels in code indicate the purpose of the input fields/components that they relate to.

Why is it important?

This ensures that:

  • People can understand the purpose of the content and form controls on the page.
  • Screen reader users can easily navigate to relevant sections of content on the page, and understand the purpose of each form input.

Summary

Headings and form labels should help people find content and complete tasks. Headings must indicate the topic or purpose of the content in that section of the page, and labels must indicate the purpose of the field they relate to.

Common mistakes

  • A heading does not indicate the purpose or topic of the content that follows;
  • A label does not indicate the purpose of the field or input component it relates to.

Design Guide

Headings

  • When you write headings for sections of a page/screen, make sure that the heading describes the topic or purpose of the section of content that it introduces
  • On your designs, indicate which elements should be coded as headings. This ensures that:
    • developers correctly identify headings in code
    • large text that shouldn’t be a heading doesn’t get coded as such

Labels

  • The labels that you write for text input fields or any other form controls (like radio buttons) need to clearly describe the purpose of the element they relate to

References

  1. W3C’s detailed explanation with techniques and examples.
  2. Accessibility Guidelines- Github.io