Landmark
A landmark is a programmatically identifiable region of a web page that helps assistive technology users understand and navigate its structure.
Common landmarks represent areas such as navigation, main content, banners, search, and supporting content.
What It Means in Practice
A sighted user can often glance at a page and immediately distinguish the header, navigation, main content, sidebar, and footer.
Landmarks provide a programmatic version of that structural overview.
Someone using a screen reader can use landmarks to move between major areas without navigating through every element in between.
How It Works
Many landmarks are created automatically through semantic HTML.
For example, <main> identifies the primary content and <nav> identifies a navigation region.
ARIA landmark roles can also identify regions when appropriate.
If multiple landmarks of the same type exist, meaningful labels may be needed to distinguish them.
Why It Matters
Landmarks make long or complex pages easier to understand and navigate.
They provide structure beyond the visual layout and let assistive technology users jump directly to important sections.
Common Problems
Common problems include:
- No
<main>region - Large portions of the page outside meaningful landmarks
- Multiple identical navigation landmarks without labels
- Incorrect landmark roles
- Adding redundant ARIA roles to semantic HTML
- Treating every section as a landmark
How to Improve
Use semantic HTML to establish the main structural regions of the page.
Keep landmarks meaningful and relatively high-level rather than turning every container into a named region.