Glossary · Accessibility term
Heading structure
Heading structure is the h1 to h6 outline of a page, and for screen reader users it is the map. Asked how they find something on a long page, 71.6% of people in WebAIM's survey said they navigate by heading. That is five times the share naming any other method. On a page with no real headings, the route is not there. The requirement is narrower than the advice, though, and it pays to keep them apart. WCAG asks that a heading be exposed as a heading rather than as text styled to look like one, and faking a heading with styling is the named failure. A real h1 to h6 element is the way almost everybody does it, and W3C also sanctions the heading role with a level attribute where a native element is out of reach. It sets no count for how many h1 elements a page may have and no flat rule against skipping a level, though a jump that misrepresents how the sections actually nest is a different argument and can be a finding on its own. One h1 naming the page, then h2 for sections and h3 inside those, is good HTML and it is our house style. It is not what anybody gets cited for.
In practice
Screen reader users pull up a list of every heading on the page and jump straight to the section they want, the way a sighted reader scans. That makes your headings a table of contents whether you wrote them as one or not. So the test is whether reading the headings alone tells somebody what the page holds and lets them choose. Read yours and see.
Two problems show up constantly and only one of them is a rule on its own. Text made large and bold to look like a heading removes the navigation entirely, and that is the named WCAG failure. Levels skipped so the outline jumps from h2 to h4 scrambles the shape, and it happens on 41.8% of home pages, which makes it the normal state of the web rather than an oddity. More than one h1 turns up on 18.1% of pages. Neither of those is a failure by the numbers alone. Both become one where the outline now says something untrue about how the page nests, because the rule underneath is that structure conveyed visually reaches the code intact.
Headings are also worth more than the mechanism people usually reach for. Landmarks are the other way to skip around a page, and 3.7% of people name them as their first move against 71.6% for headings. A document with a heading over its non-repeated content is also one of the sanctioned ways to satisfy the bypass blocks rule. A well-headed page can discharge the skip link requirement without a skip link.
Why it matters
This is the structural fix with the biggest return on most sites. It costs nothing and it helps every screen reader user on every page. The survey figures say the benefit is not theoretical either, since 88.8% of respondents rate heading levels useful and the share navigating by them has risen over time. Search is the argument to drop, though. Google reads headings and even uses them when it builds a title link. It has also said plainly that heading order does not matter for Search. So the ordering half of this is accessibility work, and it deserves to be sold that way.
What the rule asks and what we ask
Every heading exposed as a heading rather than as a styled div, and every heading describing what follows it. Those two are requirements, the first at Level A and the second at AA. One h1 naming the page and no skipped levels sits on top as good HTML and house style. Worth doing on its own merits, and worth checking for the case where it stops being style, which is an outline claiming a section sits inside another one when it does not.
Where this shows up on the site
Related terms
- Semantic HTMLSemantic HTML means using HTML elements for what they mean rather than for how they look.
- LandmarkA landmark is a named region of a page that assistive technology can list and jump straight to, and there are eight of them.
- Skip linkA skip link is usually the first link on a page, often reading "Skip to main content", and hidden until it takes focus.
- Screen readerA screen reader is software that reads the screen out loud, or sends it to a braille display, for people who cannot see it.
- PerceivablePerceivable is the first of WCAG's four principles, and the standard states it as information and user interface components being presentable in ways people can perceive.
Knowing the word is the easy part.
Find out where your own site stands. The free scan checks 10 pages in a real browser against all 90 supported automated rules, separates 27 best-practice checks from its WCAG findings, and names the rule behind every result.