ARIA: landmark role
A landmark is an important subsection of a page. The landmark role is an abstract superclass for the aria role values for sections of content that are important enough that users will likely want to be able to navigate directly to them.
Note: The landmark role is an abstract role. It is included here for completeness of documentation. It should not be used by web authors.
Description
A landmark is an abstract role for a section of content that is important enough that users will likely want to be able to navigate to the section easily and have it included in a dynamically generated summary of the page. Landmarks allow assistive technologies to navigate and to find content quickly.
To create a landmark role, define the purpose of the content by using a semantic element such as <section>, <nav>, or <main>, or adding an ARIA role that is a subclass of the landmark role such as role="banner", role="complementary", or role="region". Do not use role="landmark".
A visible label should be provided, referenced with aria-labelledby. If necessary, brief, descriptive, label can be provided with aria-label.
For screen reader users, adding landmark roles effectively creates 'skip links' for screen reader users, but don't replace in page navigation as the landmark roles are not otherwise surfaced.
Best Practices
Do not use role="landmark". Do use HTML and subclass landmark roles.
Landmarks ensure content is in navigable regions. Use <main> for role="main", <header> for role="banner", <nav> for role="navigation", and <footer> for role="contentinfo". It is also good practice to include the role redundantly with the associated semantic element. It is not as good practice to use non-semantic elements, such as <div>, adding semantics with landmark roles. But do include one or the other or both. Otherwise, your content is no longer as navigable for screen reader users.
Specifications
| Specification |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # landmark |