SIA-R53Headings are structured

Accessibility requirements

This rule is not required for conformance to any accessibility requirements.

Description

This rule checks that headings are properly nested.

Applicability

This rule applies to every element in the HTML namespace with a semantic role of heading which is included in the accessibility tree, except for the first one in tree order in the flat tree of a document.

Expectations

The last element in tree order which
- is in the flat tree of the same document as the test target; and
- has a semantic role of heading; and
- is included in the accessibility tree; and
- is before the test target in tree order
has an aria-level property whose value is greater than or equal to the value of the aria-level property of the test target minus 1.

If the test target has an aria-level property whose value is 4, then the previous heading must have an aria-level property whose value is greater or equal than 4 minus 1 (i.e. 3).

Assumptions

This rule makes no assumptions.

Accessibility support

This rule has the following accessibility support concern:

According to the Algorithm for creating an outline, <h1> nested inside sectioning content are treated as <h2>, and so on (roughly speaking). However, whatever the nesting, the heading elements are nonetheless assigned an aria-level which is solely equal to the number in the tag name (see the HTML Accessibility API Mapping). This rule is aiming at checking document structure for users of assistive technologies and is therefore looking only at the aria-level property.

Explicitly setting the aria-level attribute on an element does not change the way it is rendered (due to Non-interference with the Host Language). Doing so will result in confusing situations where the visual outline of the document is very different from the one exposed to assistive technologies.

Examples

Passed

The headings in the following document are correctly nested:

<html>
    <!--
  This heading is not applicable because it is the first heading in the document
  -->
    <h1>Part one</h1>

    <!--
  This heading has a level of 2. The previous heading has a level of 1, which is
  greater than or equal to 2 - 1 = 1.
  -->
    <h2>Chapter one</h2>

    <!--
  This heading has a level of 3. The previous heading has a level of 2, which is
  greater than or equal to 3 - 1 = 2.
  -->
    <h3>Section one</h3>

    <!--
  This heading has a level of 1. The previous heading has a level of 3, which is
  greater than or equal to 1 - 1 = 0.
  -->
    <h1>Part two</h1>

    <!--
  This heading has a level of 2. The previous heading has a level of 1, which is
  greater than or equal to 2 - 1 = 1.
  -->
    <h2>Chapter one</h2>

    <!--
  This heading has a level of 2. The previous heading has a level of 2, which is
  greater than or equal to 2 - 2 = 0.
  -->
    <h2>Chapter two</h2>
</html>

Failed

The <h3> and <h6> elements in this document are incorrectly nested:

<html>
    <!--
  This heading is not applicable because it is the first heading in the document
  -->
    <h1>Part one</h1>

    <!--
  This heading has a level of 3. The previous heading has a level of 1, which is
  not greater than or equal to 3 - 1 = 2.
  -->
    <h3>Chapter one</h3>

    <!--
  This heading has a level of 2. The previous heading has a level of 3, which is
  greater than or equal to 2 - 1 = 1.
  -->
    <h2>Part two</h2>

    <!--
  This heading has a level of 6. The previous heading has a level of 2, which is
  not greater than or equal to 6 - 1 = 5.
  -->
    <h6>Chapter one</h6>
</html>

The <h2> element is not included in the accessibility tree and is thus ignored by this rule. The <h3> is thus preceded by the <h1> and fails this rule.

<html>
    <h1>Part 1</h1>
    <h2 aria-hidden="true">Chapter one</h2>
    <h3>Section one</h3>
</html>

Inapplicable

In this document, the document element is an SVG <svg> element, not an HTML <html> element, hence the rule is inapplicable.

<svg xmlns="http://www.w3.org/2000/svg">
  <title>This is a circle</title>
  <circle cx="150" cy="75" r="50" fill="green"></circle>
</svg>

This document has only one heading which is included in the accessibility tree, hence none are applicable for this rule.

<html>
    <h2 aria-hidden="true">Part one</h2>
    <h3>Chapter one</h3>
    <h4 aria-hidden="true">Section one</h4>
</html>