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.
- The
-
Failure:
- The same
aria-label
attribute is used for two form landmarks.
- The same
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
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
Thank you for your valuable feedback!