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

The target page contains at least one element which:
- is visible; and
- is included in the accessibility tree; and
- has a semantic role of heading; and
- is at the start of the main content of the page.

Assumptions

This rule makes the following assumptions:

Headings used to pass Technique H69: Providing heading elements at the beginning of each section of content have to be included in the accessibility tree in order to be beneficial to users of assistive technologies.
Success Criterion 2.4.1 Bypass blocks requires the possibility to move at the start of the main content. If it is possible to satisfy Success Criterion 2.4.1 Bypass blocks by skipping part of the main content, then this rule and the Bypass Blocks rule may fail while Success Criterion 2.4.1 Bypass blocks is still satisfied.

Accessibility Support

This rule has the following accessibility support concerns:

Having a heading for the non-repeated content is sufficient to pass Success Criterion 2.4.1 Bypass blocks. However, if headings are used for that goal, they will only benefit users who can actually navigate from heading to heading (such a functionality can be provided by browsers, browsers plugins, screen readers or other assistive technologies). Users without any possibility for headings 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.
When headings are rendered without sufficient visual cues, they are not perceived as headings by sighted users. In this case, passing this rule might still fail Technique H69: Providing heading elements at the beginning of each section of content and Success Criterion 2.4.1 Bypass blocks. Additionally, this is likely a failure of Success Criterion 1.3.1 Info and Relationships.

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>