landmark-unique

A distinctive role or a unique combination of role, label, or title (accessible name) must be possessed by each landmark element.

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?

Each landmark on a website must have a unique combination of accessible name or role. 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.

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.