This document is in beta. Help us by reporting issues via Github or email
Back to the overview page
Headings and labels
On this page:
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.
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.
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.
Why?
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.
Official wording in the Web Content Accessibility Guidelines
2.4.6 Headings and Labels: Headings and labels describe topic or purpose. (Level AA)
See the W3C’s detailed explanation of this guideline with techniques and examples.
Guidance for Design
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
More info
Sources
Contribute
This document is in beta. Help us by reporting issues via Github or email