SIA-R100Document has instrument to main content

Accessibility requirements

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

Description

This rule checks that a web page contains an instrument to move to its main content.

Applicability

This rule applies to any web page.

Expectations

There exists at least one instrument inside the target page to move focus at the start of its main content.

Assumptions

This rule makes no assumptions.

Accessibility support

This rule has no known accessibility support concerns.

Background

While it is clear that a "skip link" is a valid way to satisfy Success Criterion 2.4.1 Bypass blocks, it is less clear how "deep" in the page such a skip link could be. Notably, Technique G124: Adding links at the top of the page to each area of the content is listing valid cases where it could be fairly "deep" if the page has many areas of the content. Rather than trying to fix an arbitrary value (e.g. "the skip link must be among the first 5 focusable elements"), or trying to figure out some condition on what precedes it, this rule only checks its existence. It is clear that if no "skip link" is provided, then another way to bypass blocks of repeated content must be found. However, it is possible to pass this rule without satisfying Success Criterion 2.4.1 Bypass blocks if the skip link is too far away from the start of the page.

Examples

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

Passed

In this page, the first <a> element is an instrument to navigate, and thus move the focus, to the main content. This example passes Technique G1: Adding a link at the top of each page that goes directly to the main content area.

<html lang="en">
    <head>
        <title>The Three Kingdoms, Chapter 1</title>
    </head>
    <body>
        <a href="#main">Skip to main content</a>
        <a href="./chapter2.html">Read Chapter 2</a>

        <aside id="about-book">
            <p>
                The Romance of the Three Kingdoms is a 14th century historical
                novel.
            </p>
        </aside>

        <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 third <a> element is an instrument to move the focus to the main content. This example passes Technique G124: Adding links at the top of the page to each area of the content.

<html lang="en">
    <head>
        <title>The Three Kingdoms, Chapter 1</title>
    </head>
    <body>
        <nav id="local-navigation">
            <a href="#bio-translator">Skip to translator's biography</a>
            <a href="#about-book">Skip to information about the book</a>
            <a href="#main">Skip to main content</a>
        </nav>

        <aside id="bio-translator">
            <p>
                Yu Sumei is a professor of English at East China Normal
                University.
            </p>
        </aside>
        <aside id="about-book">
            <p>
                The Romance of the Three Kingdoms is a 14th century historical
                novel.
            </p>
        </aside>

        <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 second <a> element (inside the second <aside> element) is an instrument to move the focus to the main content. This example passes Technique G123: Adding a link at the beginning of a block of repeated content to go to the end of the block.

<html lang="en">
    <head>
        <title>The Three Kingdoms, Chapter 1</title>
    </head>
    <body>
        <aside id="bio-translator">
            <a href="#about-book">Skip to information about the book</a>
            <p>
                Yu Sumei is a professor of English at East China Normal
                University.
            </p>
        </aside>
        <aside id="about-book">
            <a href="#main">Skip to main content</a>
            <p>
                The Romance of the Three Kingdoms is a 14th century historical
                novel.
            </p>
        </aside>

        <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 <button> is an instrument to move focus to the main content:

<html lang="en">
    <head>
        <title>The Three Kingdoms, Chapter 1</title>
    </head>
    <body>
        <button onclick="location.assign('#main')">Skip to main content</button>

        <aside id="about-book">
            <p>
                The Romance of the Three Kingdoms is a 14th century historical
                novel.
            </p>
        </aside>

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

Failed

This page has no instrument to skip to the main content:

<html lang="en">
    <head>
        <title>The Three Kingdoms, Chapter 1</title>
    </head>
    <body>
        <a href="./chapter2.html">Read Chapter 2</a>

        <aside id="about-book">
            <p>
                The Romance of the Three Kingdoms is a 14th century historical
                novel.
            </p>
        </aside>

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

Inapplicable

This document is not an HTML web page.

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