SIA-R78Headings of same level have text content between them

Accessibility requirements

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

Description

This rule checks that there is content between a heading and the next heading of the same or a lower level.

Applicability

This rule applies to every element in the HTML namespace with a semantic role of heading where the element is included in the accessibility tree, except when the element contains an element with a semantic role of or inheriting from either button or link.

button-within-heading is the ARIA-recommended way of building accordions, which appears as adjacent headings of the same level until expanded. Links, rather than buttons, are also commonly used in this pattern, even though this is incorrect. Headings containing buttons or links can also be used for a list of news headlines (going to other pages with articles), which is another acceptable pattern.

Accordions' button should have an aria-expanded="false" attribute. This is, however, not always the case and therefore this rule does not rely on it to detect accordions.

Expectations

There is some content which is included in the accessibility tree and located between the test target and the first 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 after all inclusive descendants of the test target in tree order; and
- has an aria-level property whose value is less than or equal to the value of aria-level property of the test target
or the end of the document, if no such element exists.

where content is either a node without children or a replaced element.

A container (e.g. a landmark) wrapping the second heading is not perceived as content between them and therefore not considered as content by this rule.

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.
This rule is aiming at checking document structure for users of assistive technologies and is therefore only looking at the presence of accessible content. Visible headings of the same level without visible content between them is also problematic. However, visible headings can be anything that is styled to look as a heading and therefore not easy to detect automatically.

Examples

Passed

The headings in the following document all contain some content:

<html>
    <h1>Part one</h1>
    <!--
    No content is needed here. A subsection may start immediately at the beginning of a section.
    -->

    <h2>Chapter one</h2>
    <!--
    No content is needed here. A subsection may start immediately at the beginning of a section.
    -->

    <h3>Section one</h3>
    Since this is the smaller subdivision of the document, content is needed
    here. The immediate next heading has lower level. Without any content here,
    Section one would be a totally empty Section.

    <h1>Part two</h1>
    This is the beginning of Part two, with some preliminary content before its
    sections. This content is not strictly necessarily.

    <h2>Chapter one</h2>
    Content is needed here. The immediate next heading has the same level.
    Without any content here, Chapter one would be a totally empty Chapter.

    <h2>Chapter two</h2>
    <h3>Section one</h3>
    Since this is the end of the document, content is needed here. Otherwise,
    Section one would be totally empty. This content also serves as content for
    Chapter two since it has no heading of same or lower level after it.
</html>

The headings in the following document all contain some content:

<html>
    <h1>Part one</h1>
    <h2 aria-hidden="true">Chapter one</h2>
    <!-- This h2 is not included in the accessibility tree and therefore ignored by the rule -->
    <h2>Chapter two</h2>
    This serves as content both for Part one and Chapter two.
</html>

The headings in this document have content. Even through the content of the first heading is not visible, this rule is aiming at assistive technologies users and accepts it.

<html>
    <h1>Part one</h1>
    <p style="height: 0px; width; 0px; overflow: hidden">Hello world!</p>
    <h1>Part two</h1>
    <p>Hello world!</p>
</html>

Failed

The headings for "Part two", "Part three" and "Chapter two" contain some content; the other headings in this document have no content:

<html>
    <h1>Part one</h1>
    <!--
    Part one is empty because there is no content between this and the start of Part two.
    -->

    <h1>Part two</h1>
    <!--
    Part two is not empty because the heading for Chapter one serves as content.
    -->

    <h2>Chapter one</h2>
    <!--
    Chapter one is empty because there is no content between this and the start of Part three.
    -->

    <h1>Part three</h1>
    <!--
    Part three is not empty because its subheadings serve as content.
    -->

    <h2>Chapter one</h2>
    <!--
    Chapter one is empty because there is no content between this and the start of Chapter two.
    -->

    <h2>Chapter two</h2>
    <!--
     Chapter two is not empty because the heading of Section one serves as content.
     -->
    <h3>Section one</h3>
    <!--
        Section one is empty because there is no content between this and the end of the document.
    -->
</html>

The first heading in this document contains no accessible content because the only content before the next heading is not included in the accessibility tree.

<html>
    <h1>Part one</h1>
    <div aria-hidden="true">Hello</div>
    <h1>Part two</h1>
    World
</html>

The first heading in this document contains no content. While the <nav> element is between it and the next heading, it is only a container and not content and therefore it appears that the two headings follow each other.

<html>
    <h1>Lorem Ipsum</h1>
    <nav aria-label="Site">
        <h1>Site navigation</h1>
        <a href="#">This page</a>
    </nav>
</html>

Inapplicable

This document contains no heading:

<html>
    <main>Hello world</main>
</html>

This document contains only headings who contain a button, thus building a fully collapsed accordion.

<html>
<head><title>FAQ</title></head>
<h1><button aria-expanded="false">Is this an accordion?</button></h1>
<h1><button aria-expanded="false">Can I do that?</button></h1>
</html>