Headings and labels
This information relates to criterion 2.4.6 Headings and Labels, which states:
Headings and labels describe topic or purpose.
In my experience, this criterion is often confused with a couple of other criteria:
- 1.3.1 Info and relationships
- 3.3.2 Labels or instructions
This criterion doesn't require headings and labels to be present, and it doesn't require them to be marked up correctly. This criterion, I think, is much simpler. It merely requires any headings and labels used to be descriptive, so that the user knows what it's all about.
Who do Headings and Labels benefit?
This is definitely one that I would say benefits everyone to at least some degree. Most of us skim through content, by headings, to identify what we want to read and what we are happy to skip. However, if a person has difficulty reading or retaining information, this will be even more important.
How do I make my headings and labels meaningful?
Headings
Any headings you use must be descriptive, telling the user what the content in that section will be about. It should also be as short as possible to make it easy to read and remember.
The following table shows some examples of meaningful headings and headings to avoid:
| Topic of website | Descriptive headings - good | Generic headings - bad |
|---|---|---|
| Assistance dogs | What is an assistance dog? | What is it? |
| Wheelchair maintenance | Part 1: How to remove a wheel | Part 1 |
| News | Today's headlines - 17th June 2023 | Today's headlines |
| Holiday blog | Day 1 - Coventry Cathedral | Day 1 |
| Photography | 4. Rule of thirds | Technique number 4 |
To pass this criterion, any headings you use must be descriptive. You should then also check that your headings pass 1.3.1 Info and relationships. This is a separate criterion, which looks at the semantic mark-up of your headings and whether they are correctly nested.
Labels
Labels help users to fill in forms and other input fields. The label should tell the user what information they need to provide in each field.
The following table shows some good and bad examples of labels:
| Descriptive labels - good | Generic labels - bad |
|---|---|
| House number and street | Address line 1 |
| National insurance number | NINO |
| Last name (required) | Surname * |
A few words of explanation about the bad examples I used. Avoid using acronyms for labels. You might know what they mean but not everybody will. At work, we all know that NINO is short for national insurance number but it wouldn't be reasonable to assume that everyone knows that.
First name and last name are more widely understood than, for example, Christian name and surname. If a field is required, it is better to indicate this in words than to use a red asterisk. Symbols are not reliably read by screen readers and they are small enough to be missed if someone is visually impaired. Red (#ff0000) on white also fails colour contrast, so avoid using it anyway. If most fields are required, it might be better to ask users to fill in all fields except those marked as optional.
To pass this criterion, any labels you use must describe the purpose of the input field. You should then also check that you have passed 3.3.2 Labels or Instructions and 4.1.2 Name, Role, Value. These are separate criteria, which look at whether all inputs have a label and how those labels are marked up to work with assistive software.
