Landmark Unique
Minor - WCAG LEVEL AAA
The issue of non-unique landmarks arises when multiple landmarks on a webpage share the same role without a distinguishing label or title. Landmarks are HTML elements that define the structure of a webpage, such as <header>, <nav>, <main>, <footer>, and <aside>. These elements help users of assistive technologies, like screen readers, to navigate the page efficiently by providing clear, semantic markers.
When landmarks are not unique, users may become confused or frustrated because they cannot easily distinguish between different sections of the page. For example, if there are multiple navigation bars <nav>) on a page but they all have the same role without a unique label, a screen reader user might not be able to tell which navigation bar leads to the main site sections and which one leads to user account settings.
To fix this issue:
Ensure that each landmark has a unique role or is paired with a unique label or title. This can be achieved by using the
aria-labeloraria-labelledbyattributes to provide a descriptive name for each landmark.For example, if there are two
<nav>elements, you could usearia-label="Main Navigation"andaria-label="User Settings Navigation"to differentiate them.
Best practices:
Always use semantic HTML elements for landmarks.
Use
aria-labeloraria-labelledbyto provide unique identifiers for landmarks with the same role.Regularly audit your page structure to ensure landmarks are correctly implemented.
Common mistakes:
Using generic labels like "Navigation" for multiple landmarks or failing to update labels when the page structure changes.
Avoid using the same
aria-labelfor different landmarks, as this negates the purpose of providing unique identifiers.