SIA-R57Perceivable text content is included in a landmark

Accessibility requirements

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

Description

This rule checks that all perceivable text content is included in a landmark region.

Applicability

This rule applies to every text node whose data is not empty and where the text node is included in the accessibility tree, except if the document containing the text node contains no element whose semantic role inherits from landmark.

Expectations

  1. Either the text node is a descendant in the flat tree of the first element in the sequential focus navigation of its web page; or it is a descendant in the accessibility tree of an element whose semantic role inherits from the dialog or landmark role.

Note: The first focusable element on a page is often a skip link, which this rule ignores. Element with a dialog role are considered to be perceived on their own, rather than in the context of a page, and therefore do not need to be wrapped in a landmark.

Assumptions

This rule makes no assumptions.

Accessibility support

This rule has no known accessibility support concerns.

Examples

Passed

This page has all its text nodes inside landmark:

<html>
    <body>
        <header>Welcome to my awesome page</header>
        <main>This page is awesome</main>
        <footer>This page is maintained by an awesome person</footer>
    </body>
</html>

This page has all its text nodes inside landmark, except for the initial skip link:

<html>
    <body>
        <a href="#main">Skip to main content</a>
        <header>Welcome to my awesome page</header>
        <main id="main">This page is awesome</main>
        <footer>This page is maintained by an awesome person</footer>
    </body>
</html>

Failed

This page has all some text nodes outside of landmark:

<html>
    <body>
        <header>Welcome to my awesome page</header>
        This page is awesome
        <footer>This page is maintained by an awesome person</footer>
    </body>
</html>

Inapplicable

This page has no text node:

<html>
    <body>
        <img src="https://picsum.photos/100" alt="A placeholder image" />
    </body>
</html>