a11yTips

Organize content using hierarchically nested headings

no. 012

Make sure headings are nested hierarchically in order to facilitate navigation

Properly nesting headings without skipping any hierarchical levels is not a requirement per se, but it facilitates navigation and automatically contributes to a more logical document outline. This is invaluable for users who rely on this outline to understand what the page is about – much like what is expected from a table of contents. Therefore, skipping hierarchy levels when using headings can easily bring confusion to some users, especially if they have no other way of confirming whether they missed a level of information or not.

To do this, simply make sure that each content section starts with a heading that is properly nested in the document structure. Properly nested headings will be of the appropriate hierarchical level (if a section starts with a second-level heading, then all sub-headings of that section should be third-level, and so on). This will provide users of assistive technology with a mechanism to easily understanding the overall document structure.

User Story

As a user using assistive technology, I want the section heading structure of a page to follow a logical and hierarchical sequence, so that I can reliably navigate through each section and easily find the information I’m looking for.

Simple Code Example

<h1>First-level Heading</h1>
<h2>Second-level Heading</h2>
<h3>Third-level Heading</h3>
…

Testing Methodology

Using the Web Developer Toolbar for Firefox, select the “View Document Outline” test under “Information” and make sure all headings are properly and hierarchically nested without skipping levels.

Specification Details