SIA-R56Landmarks of same type have a unique accessible name

Accessibility requirements

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

Description

This rule checks that navigational landmarks of the same type are uniquely identifiable.

Applicability

This rule applies to every set of two or more elements which

Expectations

  1. No two elements within the test target have accessible name that are a case-insensitive match of each other.

Assumptions

This rule makes the following assumption:

  • Elements with identical landmark roles on the same page do not have identical content and purpose.

Accessibility support

This rule has no known accessibility support concerns.

Examples

Passed

This document contains two <aside> elements, whose implicit semantic role is complementary. They each have a different accessible name.

<html>
    <aside aria-label="About the author">
        <!-- Short biography of the author -->
    </aside>
    <aside aria-label="About the book">
        <!-- Note about various editions of the book -->
    </aside>
</html>

This web page contains two elements, whose semantic role is complementary (one implicitly, the other explicitly). The elements are in separate documents, but nonetheless in the same web page. They each have a different accessible name.

<html>
    <div role="complementary" aria-label="About the author">
        <!-- Short biography of the author -->
    </div>
    <iframe
        srcdoc="
    <aside aria-label='About the book'>
      <!-- Note about various editions of the book -->
    </aside>"
    />
</html>

Failed

This document contains two <aside> elements, whose implicit semantic role is complementary. They both have the same accessible name.

<html>
    <aside aria-label="More information">
        <!-- Short biography of the author -->
    </aside>
    <aside aria-label="More information">
        <!-- Note about various editions of the book -->
    </aside>
</html>

This document contains two <aside> elements, whose implicit semantic role is complementary. None of them has an accessible name.

<html>
    <aside>
        <!-- Short biography of the author -->
    </aside>
    <aside>
        <!-- Note about various editions of the book -->
    </aside>
</html>

Inapplicable

Only one of these <nav> elements (whose implicit semantic role is navigation) is included in the accessibility tree.

<html>
    <nav aria-hidden="true">
        <!-- List of links to headings in the page -->
    </nav>
    <nav>
        <!-- List of links to related pages -->
    </nav>
</html>

These two elements have different landmark roles.

<html>
    <aside>
        <!-- Short biography of the author -->
    </aside>
    <nav>
        <!-- List of links to Chapters in the book -->
    </nav>
</html>