SIA-R99Document has its main content inside a landmark

Accessibility requirements

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

Description

This rule checks that the main content of a web page is inside a landmark.

Applicability

This rule applies to any web page.

Expectations

The main content of the target page is inside an element with a semantic role inheriting from landmark.

The rule doesn't check that the main content is inside a main landmark. Having it inside other kind of landmarks is likely a failure of Success Criterion 1.3.1 Info and Relationship.

Assumptions

This rule makes no assumptions.

Accessibility Support

This rule has the following accessibility support concern:

Marking content with landmarks is sufficient to pass Success Criterion 2.4.1 Bypass blocks. However, this will only benefit users who can actually navigate using landmark roles (such a functionality is usually provided by assistive technologies, but could also be provided by browsers or browsers plugins). Users without any possibility for landmarks navigation will be left without way of bypassing blocks of repeated content and will still experience accessibility issues. Therefore, it is recommended to provide other ways of bypassing blocks.

Examples

In all examples, the main content is the element with an id of main, and the <nav> element is repeated content.

Passed

In this page, the <main> element has a semantic role of main and contains the main 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 id="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>

In this page the <div> element has a semantic role of main and contains the main 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>

        <div role="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>
        </div>
    </body>
</html>

Failed

This page has no element with a landmark role:

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

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

In this page, the main content is not inside an element with a landmark role:

<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>

        <p id="main">
            Unity succeeds division and division follows unity. One is bound to
            be replaced by the other after a long span of time.
        </p>
    </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>