Understanding WCAG SC 2.4.6 Headings and Labels
Version and Level: 2.0/2.1/2.2 (Level AA)

WCAG SC 2.4.6 requires that headings and labels describe the topic or purpose clearly and concisely. This ensures that users, especially those with disabilities, can easily understand the content and navigate through it effectively. Please note, that unlike success criterion 1.3.1 that requires a correct semantic implementation of headings and labels, such as including the correct HTML tags, and correct id and for attribute, this success criterion does not refer to that but only to the content of the heading or labels. It is possible to fail success criterion 1.3.1 while passing success criterion 2.4.6.

Benefits:

  1. Improved Navigation for Low Vision Users: Visually impaired users often navigate the page using heading shortcuts. Clear headings and labels help them understand the structure and organization of the content.
  2. Better Understanding for Cognitive Disabilities: Users with cognitive disabilities benefit from clear and concise headings and labels, making it easier to find and comprehend information.

Main Objective:

To ensure that headings and labels provided within web content are descriptive and meaningful, aiding in the understanding and navigation of the content.

Best Practices:

  • Use clear and concise language for headings and labels: Use clear and concise language for headings and labels.

  • Place distinguishing information at the beginning: Place distinguishing information at the beginning of headings for better clarity.

  • Ensure accurate reflection of content: Ensure headings and labels accurately reflect the content they describe.

  • Avoid ambiguous or lengthy headings: Avoid using ambiguous, vague, or lengthy headings and labels.

Examples & Explanation:

Example: Descriptive Headings in a News Article

What Should Be Avoided

HTML/CSS

              <!DOCTYPE html>
              <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <title>News Article</title>
              </head>
              <body>
                  <h1>Breaking News</h1>
                  <h2>Details</h2>
                  <p>Today, something significant happened in the world of technology. Many people are excited about this new development...</p>
                  <h2>More Info</h2>
                  <p>Experts believe that this change will bring many positive effects to the industry...</p>
              </body>
              </html>

Explanation:The headings "Details" and "More Info" are vague and do not clearly describe the content that follows. This can be confusing for users who rely on headings to navigate and understand the structure of the content.

What Should Be Done

HTML/CSS

              <!DOCTYPE html>
              <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <title>News Article</title>
              </head>
              <body>
                  <h1>Breaking News: Major Advancement in Technology</h1>
                  <h2>Technological Breakthrough Details</h2>
                  <p>Today, a significant technological breakthrough was announced that has the potential to change the industry...</p>
                  <h2>Expert Opinions on the Advancement Info</h2>
                  <p>Experts believe that this new development will bring many positive effects to the technology sector...</p>
              </body>
              </html>

Explanation:The headings "Technological Breakthrough Details" and "Expert Opinions on the Advancement Info" are clear and descriptive, providing users with a better understanding of the content that follows each heading.

Next Up

Expand your knowledge with SC 2.4.7 - Focus Visible. Learn to ensure focus visibility for all users.

Go to SC 2.4.7