SIA-R55Landmark regions with identical accessible names serve an equivalent purpose

Accessibility requirements

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

Description

This rule checks that landmark elements with identical accessible names serve the same or an equivalent purpose.

Applicability

This rule applies to every set of any two or more elements for which all the following Are true:

  • the elements have the same semantic role, which inherits from landmark; and

  • they are in the same web page; and

  • they are included in the accessibility tree; and

  • they have matching accessible names that are not empty.

    The type of landmark roles are often added to accessible names by assistive technologies. Therefore, elements with different roles won't be announced the same way in any case. For example, <nav aria-label="site"> is announced as navigation "site" while <aside aria-label="site"> is announced as complementary "site" so that the two can be distinguished.

Expectations

  1. The elements content is either the same content or equivalent contents.

Assumptions

This rule makes no assumptions.

Accessibility support

This rule has no known accessibility support concerns.

Examples

Passed

These two navigational elements have the same accessible name and contain the same content:

<nav aria-label="Contact us"><a href="mailto:contact@example.org"></a></nav>

<nav aria-label="Contact us"><a href="mailto:contact@example.org"></a></nav>

Failed

These two navigational elements have the same accessible name but contain different and non-equivalent contents:

<nav aria-label="Contact us"><a href="mailto:contact@example.org"></a></nav>

<nav aria-label="Contact us"><a href="mailto:support@example.org"></a></nav>

Inapplicable

The rule does not apply if the accessible name of each element is unique:

<nav aria-label="Contact us"><a href="mailto:contact@example.org"></a></nav>

<nav aria-label="Ask for help"><a href="mailto:support@example.org"></a></nav>

This rule does not apply if the elements do not have the same semantic role:

<nav aria-label="Contact us"><a href="mailto:contact@example.org"></a></nav>

<aside aria-label="Contact us">You can call us or send a mail.</aside>