landmark-unique

Landmarks must have a unique role or role/label/title (i.e. accessible name) combination.

Description

It is necessary to have multiple instances of landmarks with the same role possess distinctive, accessible names to ensure accessibility.

Why is it important?

The landmark-unique rule is a best practice guideline to ensure each landmark on a website has a unique role or accessible name (role, label, or title) combination. Landmarks serve to identify content regions on a webpage. In cases where a landmark lacks an explicitly defined accessible name, assistive technologies rely on its ARIA role for identification. However, when multiple landmarks of the same type (e.g., navigation or region landmarks) exist on a page, it becomes necessary to provide additional labeling using author-defined accessible names. It ensures that users can distinguish between them effectively.

Examples

• Success:

  • The aria-label attribute is used to provide a unique, accessible name that describes the content of the form landmark.

• Failure:

  • The same aria-label attribute is used for two form landmarks.

How to fix?

Although you can define ARIA landmarks using the role attribute, certain HTML5 sectioning elements have predefined landmark roles by default. These include main, nav, aside, and, in some cases, header and footer. Consequently, it is important to assign a unique, accessible name to each of them when using multiple navigation elements on a page. Use the aria-label and aria-labelledby attributes to provide uniquely accessible names.

Tags

cat.semantics, best-practice

References

• Deque University: landmark-unique