Understanding WCAG SC 2.4.6 Headings and Labels
2.4.6 Headings and Labels: Headings and labels describe topic or purpose. (Level AA)
The intent of this success criteria is to provide descriptive headings & labels that are understood by all the users. Descriptive means clear, concise & easily understood content. Users with low vision, motor impaired & cognitive users will benefit most from this checkpoint.
Headings and Label Transcript
Hello everyone! Today we’re going to talk about headings and labels. We’re also going to talk about their requirements, benefits, types, examples, failure scenarios, and how we can fix them.Headings and labels for form controls and UI controls must be descriptive. By descriptive, we mean they must be concise, clear, and easy to understand. But why does it matter? Let’s see who benefits from this. It’s for users who have reading disabilities and other cognitive disabilities, such as short-term memory loss. It’s for users who use screen readers or other assistive technologies that bring up a list of headings for easy navigation, allowing them to read headings without additional context. It’s also for low vision users who can see only a limited number of characters at a given point in time.
Now let’s take a look at some examples. A webpage containing news articles where the headings contain the first 35 words of the articles and a “Read More” link. A “Contact Us” page where users are asked to fill in both their work phone number and home phone number, with fields labeled as “Work Phone Number” and “Home Phone Number,” respectively.
Unfortunately, there are some failure scenarios. Let’s take a look at them. A payment page where the headings are not separated or descriptive for the billing address and shipping address. A “Contact Us” page where the address fields are labeled as “Address 1” and “Address 2” instead of “Address Line 1” and “Address Line 2.”
Now let’s see how we can fix them. Content authors must define the section titles of their articles or webpages clearly and concisely. When designing forms, the form labels must be precise and descriptive enough that users can understand the purpose of the field without additional context.
This is the end of the video. Thank you for joining! If you like the video, do like and subscribe.
Examples:
Good example of Descriptive Heading:
Introduction to Digital A11Y
Bad Example of Descriptive Heading:
Introduction
In the above examples the text “introduction to DigitalA11Y” is more descriptive & will be well understood by all the user groups. Providing just “Introduction” will not make sense if the user skips to the heading using a screen reader shortcut.
Good Example of Descriptive Label
Bad Example of Descriptive Label
In the above examples we can easily see that “first name” label is more descriptive & easily understood while “”last name” is labelled as “l name” which is not understood. “L name” can resemble anything which is the reason labels must be descriptive.
