SIA-R97Document has collapsible blocks of content

Accessibility requirements

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

Description

This rule checks that repeated blocks of content are collapsible

Applicability

This rule applies to any web page.

Expectations

For each block of repeated content in the target page, which is before (in the flat tree) the main content, all the following are true:
- there exists an instrument to make all nodes in this block not visible; and
- there exists an instrument to remove all nodes in this block from the accessibility tree.

Assumptions

This rule makes no assumptions.

Accessibility Support

This rule has no known accessibility support concerns.

Background

Usually the same instrument removes both visibility and inclusion in the accessibility tree of a given block of repeated content.

The same instrument may remove one, several, or even all blocks of repeated content.

If there is no block of repeated content before the main content the rule passes.

Technique SCR28: Using an expandable and collapsible menu to bypass block of content does not have any requirements concerning the location of the instruments in relation to the block of repeated content they control, hence this rule doesn't. It is likely a good idea to either keep each instrument close to the start of the block of repeated content it controls; or to group them all in one place near the start of the page. Notably, instruments located after (in reading order) the block they collapse are likely not satisfying Success Criterion 2.4.1 Bypass blocks, which this rule is designed for. Thus, it is possible to pass this rule without satisfying Success Criterion 2.4.1 Bypass blocks.

Examples

In all examples, the <main> element is the main content of the page, and the <aside> and <nav> elements are considered blocks of repeated content.

All examples are sharing the following scripts and styling:

function toggleHidden(id) {
    const element = document.getElementById(id);
    element.style.display = element.style.display === "none" ? "" : "none";
}

function toggleVisibility(id) {
    const element = document.getElementById(id);
    element.className = element.className === "off-screen" ? "" : "off-screen";
}

.off-screen {
    position: absolute;
    left: -9999px;
}

Passed

This page has a button at the start to toggle the visibility and inclusion in the accessibility tree of the navigational block of repeated content:

<html>
    <head>
        <title>The Three Kingdoms, Chapter 1</title>
    </head>
    <body>
        <button onclick="toggleHidden('chapters-navigation')">
            Toggle table of content
        </button>

        <nav id="chapters-navigation">
            <ol>
                <li><a>Chapter 1</a></li>
                <li><a href="./chapter2.html">Chapter 2</a></li>
            </ol>
        </nav>

        <main>
            <p>
                Unity succeeds division and division follows unity. One is bound
                to be replaced by the other after a long span of time.
            </p>
        </main>
    </body>
</html>

Failed

This page has no instrument to toggle the navigational block of repeated content:

<html>
    <head>
        <title>The Three Kingdoms, Chapter 1</title>
    </head>
    <body>
        <nav id="chapters-navigation">
            <ol>
                <li><a>Chapter 1</a></li>
                <li>
                    <a href="./chapter2.html">Chapter 2</a>
                </li>
            </ol>
        </nav>

        <main>
            <p>
                Unity succeeds division and division follows unity. One is bound
                to be replaced by the other after a long span of time.
            </p>
        </main>
    </body>
</html>

This document has an instrument to toggle visibility of the navigational block of repeated content, but none to toggle its inclusion in the accessibility tree:

<html>
    <head>
        <title>The Three Kingdoms, Chapter 1</title>
    </head>
    <body>
        <a href="#" onclick="toggleVisibility('chapters-navigation')"
            >Toggle table of content</a
        >

        <nav id="chapters-navigation">
            <ol>
                <li><a>Chapter 1</a></li>
                <li>
                    <a href="./chapter2.html">Chapter 2</a>
                </li>
            </ol>
        </nav>

        <main>
            <p>
                Unity succeeds division and division follows unity. One is bound
                to be replaced by the other after a long span of time.
            </p>
        </main>
    </body>
</html>

Inapplicable

This document is not an HTML web page:

<svg xmlns="http://www.w3.org/2000/svg">
  <title>This is an SVG</title>
</svg>