SIA-R98Document has heading at the start of its main content

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 starts with a heading.

Applicability

This rule applies to any web page.

Expectations

  1. The target page contains at least one element which:

Assumptions

This rule makes the following assumptions:

Accessibility Support

This rule has the following accessibility support concerns:

Background

Neither this rule, nor technique H69: Providing heading elements at the beginning of each section of content, expects the heading to accurately describe its corresponding section. However, having non descriptive headings fails Success Criterion 2.4.6: Headings and Labels

Examples

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

Passed

This page has a <h1> heading, which is visible and included in the accessibility tree, at the start of its main content:

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

        <main>
            <h1>
                Three Heroes Swear Brotherhood at a Feast in the Peach Garden
            </h1>
            <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 page has a <h1> heading, which is visible and included in the accessibility tree, at the start of its main content; the image is not perceivable content because it has a role of presentation, therefore, the <h1> is at the start of the main content:

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

        <main>
            <img src="./peach-garden-oath.jpg" alt="" />
            <h1>
                Three Heroes Swear Brotherhood at a Feast in the Peach Garden
            </h1>
            <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 page has a <h1> heading, which is visible and included in the accessibility tree, at the start of its main content:

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

        <main>
            <h1>
                <img
                    src="./peach-garden-oath.jpg"
                    alt="Three Heroes Swear Brotherhood at a Feast in the Peach Garden"
                />
            </h1>
            <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

In this page, there is no element with a semantic role of heading, even though the <strong> element is styled to appear as one:

<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>
            <strong style="font-size: 18pt"
                >Three Heroes Swear Brotherhood at a Feast in the Peach
                Garden</strong
            >
            <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 only element with a role of heading is not at the start of the main content:

<html>
    <head>
        <title>The Three Kingdoms, Chapter 1</title>
    </head>
    <body>
        <nav id="chapters-navigation">
            <h1>Content</h1>
            <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>

Acknowledgments

This document includes material copied from or derived from https://act-rules.github.io/rules/047fe0. Copyright © 2021 W3C® (MIT, ERCIM, Keio, Beihang).