Landmarks
Last updated
Was this helpful?
Last updated
Was this helpful?
Topic
Technique
WCAG AA Requirement
Landmarks to Bypass Blocks of Content
Bypass blocks: Screen readers allow users to navigate by landmarks, so landmarks are an effective way to bypass blocks of content, as required by WCAG 2.4.1. Other methods may be used as well as — or instead of — landmarks, such as skip links, , expand/collapse regions, etc.
Required
Landmark Structural Organization
Page layout groupings: Landmarks SHOULD be used to accurately designate pre-defined parts of the layout (e.g. the header, navigation, main content, and footer).
best practice
Content within landmarks: All text SHOULD be contained within a landmark region.
best practice
Landmark names: Multiple instances of the same type of landmark SHOULD be distinguishable by different discernible names (using aria-label
or aria-labelledby
).
best practice
Only one instance of some landmarks: A page SHOULD NOT contain more than one instance of each of the following landmarks: header/banner, main, and footer/contentinfo.
best practice
Limit the number of landmarks: The total number of landmarks SHOULD be minimized to the extent appropriate for the content. Note: Having a large number of landmarks defeats the main purpose of landmarks, which is to make it easy to navigate quickly to sections of the layout.
best practice
Markup
Markup: Landmarks MAY be designated with either HTML tags or their equivalent ARIA roles (e.g. <header>
or role="banner"
, <nav>
or role="navigation"
, <main>
or role="main"
, <footer>
or role="contentinfo"
, etc.).
best practice