How are headings used?
Headings are used by:
- search engines to figure out what’s on the page;
- screen reader users to hear what’s on the page, and to jump to a section of the page;
- sighted users who are visually scanning a page.
1. Plan out our headings
- What’s the topic or purpose of this page? That text should be in an
h1near the top of the page. - What are the sections of the page? The name of each section should be in an
h2, at the start of the section. - What (if any) are the subsections of each section? The name of each subsection should be in an
h3, at the start of the subsection. - What (if any) are the sub-subsections of each subsection? The name of each sub-subsection should be in an
h4, at the start of the sub-subsection. - And so on.
The list of headings should read a bit like a table of contents for the page.
“Section”s here refer to logically distinct pieces of the page. If we’re using headings well, we can use divs or sections and the end result is essentially the same (in terms of accessibility). See Scott O’Hara’s Accessibility of the section element for more detail.
2. Check our headings
High-level checks
Headings divide the page into meaningfully named sections, increasing one level at a time.
Detailed Page-level Acceptance Criteria
- Page should contain an
h1. - Page should contain only one
h1. h1must describe the topic or purpose of the page.h1should be similar to thetitle.h1could be the first heading on the page.- Headings should only increase by one level down each branch of the DOM.
- Headings must describe the topic or purpose of content immediately after it.
- Heading elements nust only be used semantically, not for presentation.
Note: check text that looks like a heading but is not a heading element. Should it be a heading element? Should it look like body copy?
Summary
People use headings to scan the page. Some people use them as additional navigation aids too.
We can make our headings more accessible by checking their usage, nesting, and order.