SIA-R87First focusable element is link to main content

Accessibility requirements

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

Description

This rule checks that the first focusable element is a link to the main content in the page

Applicability

This rule applies to every web page.

Expectations

The page has a non-empty sequential focus navigation order and all the following are true for the first element in the sequential focus navigation order:
- the element is keyboard actionable; and
- the element is included in the accessibility tree; and
- the element has a semantic role that either is or inherits from link; and
- when the element is activated, focus moves at the start the main content of the page; and
- the element has an accessible name that communicates that it skips to the main content area.

Assumptions

This rule makes the following assumptions:

The description of the link is provided through its accessible name.
Any global dismissible information that only appears once per site has already been acknowledged and is not displayed anymore. Many sites display a cookies policy banner which might be stealing focus until dismissed, usually by viewing and accepting cookies policy.
The language of each test target can be correctly determined, either programmatically or by analyzing the content, and sufficiently understood.

Accessibility support

This rule has no known accessibility support concerns.

Examples

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

Passed

This page starts with a skip link:

<html lang="en">
    <head>
        <title>The Three Kingdoms, Chapter 1</title>
    </head>
    <body>
        <a href="#main">Skip to main content</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>

Failed

This page has no skip link:

<html lang="en">
    <head>
        <title>The Three Kingdoms, Chapter 1</title>
    </head>
    <body>
        <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 skip link is not the first focusable element:

<html lang="en">
    <head>
        <title>The Three Kingdoms, Chapter 1</title>
    </head>
    <body>
        <nav>
            <a href="https://alfa.siteimprove.com/">Alfa hub</a>
            <a href="#main">Skip to main content</a>
        </nav>

        <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 element to skip to the main content has a role of button, not link:

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