Criterion 9.2 – Coherence of the outline document

This post is also available in: Français (French)

The document tree (outline) is generated by the use of sectioning <nav>, <article>, <section>, and <aside> tags, and implicit sections generated by using a <hx> (when the <hx> is not the first child of a section).
A sectioning tag is used to structure or group content, parts of a content, or a set of contents that can be considered independently of the rest of the document.

A navigation area in the site or in a subpart of the site, a table of contents or the navigation area of a collection of pages (<nav>), a content “complementary” to main content (<aside>), the main content or the grouping of several content like articles (<article> or <section>) or a secondary content such as a comment, a Twitter widget, RSS feeds (<article> or <section>) are examples of sectioning contents.

In the case of content, as opposed to the navigation areas (<nav>) or complementary content areas (<aside>), a section should have, if appropriate, a header (<header>) and footer (<footer>).

The first heading <hx> in a section gives the “name” of this section, as it will be set in the document tree. The following headings (<hx>;) create implicit sections that will constitute the section’s outline.

A section can be considered independently of the rest of the page, the tree generated by the implicit sections (<hx>) is calculated from Level 1 assigned to the first section heading.

When used, the document tree may therefore be different from the page content tree based on <hx>, although both structures are similar.

This tree must be representative of the document structure and be consistent with the structure of the content generated by the use of <hx>. Structuring the content generated by the <hx> tags could be, theoretically, deduced from the document tree, thus the HTML5 specification recommends using <h1> headings. But this practice is prohibited by RGAA and requires via the criterion 9.1 to use a relevant headings hierarchy (<hx>).

If the outline (provided that it is relevant) allows exploration and navigation features with some assistive technologies, it also affects the headings hierarchy generated by the <hx> by changing the level of rendered headings.

To accompany the gradual support of the document outline algorithm, and considering the fact that the RGAA requires to have, in any case, a robust and consistent content structure (tags <hx>), it is acceptable to consider the test 9.2.2 as not applicable when it is not possible to ensure that the document outline is perfectly consistent.

In this case, non-compliant content for this test should be signaled as a simple warning.

Best practice

All page content must be contained by landmarks. Ensure all content is contained within a landmark region, designated with HTML5 landmark elements and/or ARIA landmark regions.

Screen reader users can navigate to a section based on its HTML element or ARIA Landmark. For example, you might use ARIA Landmarks to provide a simple replacement for a skip navigation link, though the replacement is only useful for users of screen readers. Sighted users or people using screen enlargers won’t benefit from the addition, so it’s not a good practice to substitute ARIA landmarks for skip navigation links altogether.

It is best practice to contain all content excepting skip links, within distinct regions such as the header, nav, main, and footer. It is recommended not imbricate landmark in other landmark.

<html lang="en">
<head>
<title>Hello</title>
</head>
<body>
<header>This is the header</header>
<nav>This is the nav</nav>
<main>This is the main</main>
<footer>This is the footer</footer>
</body>
</html>