Landmarks Need Unique Roles or Names

Providing unique, accessible landmark names enables screen reader users to navigate a webpage quickly, making accessibility a key part of an inclusive web experience.

For example, if there are three <footer> landmarks on a page without additional information provided to clarify the difference in the areas for the screen reader user, confusion is sure to follow. Screen readers would announce something like "Footer" for all three elements, with no clarification of the differences.

Landmarks should have either a unique role or a unique accessible name to pass this best practice check.

Whenever possible, use standard HTML elements that already have built-in roles, such as:

If you have duplicates of an allowed landmark type, be sure to use one or more of the items listed below to differentiate each instance of the landmark.

The accessible name given to an element is determined using the following hierarchy:

Even though the ids for the two nav elements above have different values, their aria-labelledby values have the same value, so the names are not unique. Changing the value of either div reference in the nav code will provide a unique accessible name for each nav landmark.

Using aria-label

The <nav> elements above have different ids, but their aria-labels are the same. ID values are not taken into account for accessible landmark names. Screen readers would announce something like, "Navigation, our nav" for both of these elements.

Simply change one of the aria-labels in the example above to pass this check.