In accessibility circles there’s always been plenty of lively discussion about heading structure for content. Nobody seems to agree on what the best way is to deliver document structure using headings. Where there is plenty of agreement is that headings should be reliable, consistent and provide blind and low vision users a with a better understanding of the page content.
Much of the confusion around headings springs from an array of automated tools that incorrectly inform that you won’t achieve WCAG 2.0 conformance if you use more than one H1 or if you don’t use a H1, or if you skip a heading element (say H2 to H4). Such tools are just plain wrong. WCAG doesn’t prescribe any of those things. Although we need to make it clear that we’re not advocating sloppy structure. Content should always be designed with a logical hierarchy as part of good design practice.
We’ve put something together here to try and illustrate how screen reader users use headings and why a prescription for heading order may or may not actually be that important from a practical perspective. If you are new to building or testing sites or applications for accessibility then this article will provide a bit of perspective.
How Screen Reader users use headings
Here are some examples (for those that haven’t had the opportunity to use a screen reader like JAWS or NVDA (free download), We have a list of keyboard shortcuts can be found in our resources section for boths JAWS and NVDA):
By pressing “H” on the keyboard, a JAWS or NVDA user user can cycle through headings. the Screen Reader will announce the status of each heading as it receives focus e.g. “Dig inclusion heading level 1”, so in this way, the user gets an indication of the order of the headings as they appear on the page and what heading level they have been given. This allows a non-sighted user to quickly get an idea of the page content without having to read the whole page, just like a sighted user skimming over a pages headlines to go to the bit they want to read.
Another tool available to the screen reader user is the heading list dialogue (insert + F6 in JAWS), (insert + F7 in NVDA) which displays a list of all the headings on the page – like a contents page.
What does WCAG 2.0 say about headings?
While some automated tools will try to enforce a particular heading structure, this is definitely not a requirement for AA conformance. In fact, for conformance the minimum requirement is simply to identify headings, but the actual level chosen is down to the developer.
The relevant Guideline is 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
The specific W3C technique for headings in HTML is H42: Using h1-h6 to identify headings
Both of these documents say that you SHOULD have a logical heading structure, but don’t go as far as to say that you MUST use a logical structure. In W3C terms you only need to do things which are a MUST. Technically you could identify every heading on your page as a H6, or use random heading levels and still pass this criterion, but obviously we don’t think that’s a good idea.
Consistency is the key
Think carefully about how your content will appear across all your pages, decide on a structure, and stick to it. As a general guide, we’d recommend something like this:
<H1>Main Content heading</H1>
…and so on.
This consistency helps user to find information on subsequent pages.
Some developers may want to use headings to identify the start of menus, sidebars or footers. At Dig we use H1 for non-content headings in order to avoid implying that they are within the hierarchy of another heading (as H1 is the highest level possible), but other ideas about headings can be just as valid as long as they are consistent. Other sites commonly use H5 or H6 for “side-content” but whichever you decide, just remember to keep it consistent.
You might also rely on HTML 5 elements to identify page components such a s<main> and <footer>.
- A consistent heading structure makes content easier to find.
- Keep your information logical.
- If you find the need to skip a heading in order to keep a consistent structure then this is fine.
- Don’t feel the need to add or change headings purely to pass automated tests. The user experience is more important.
- Before you start building content take time to think about the structure of your information across different content types, and within the context of the page template.
Update to blog post September 2018 – WCAG 2.1
Please note that WCAG 2.0 has been updated and replaced with WCAG 2.1. The three levels remain the same, A, AA and AAA. Our blog post details the changes What is WCAG 2.1