Using Landmarks Correctly to Maintain Structural Clarity
Landmarks structure page areas and facilitate direct navigation. Roles are defined sparingly, unambiguously, and, where possible, using native elements.
For web developers and UX teams, the key aspects of "Using Landmarks for Clear Page Structure" are "Clear Main Area" and "Meaningful Regions." The perspective "Native Semantics and Page Structure" demonstrates how these two points interact in practice.
Published: 3 min read · Author: Sebastian Geier
How to Use Landmarks to Maintain Clarity of Page Structure
Landmarks represent the few meaningful page regions, such as the main content, navigation, search, and supplementary areas. A single main menu and distinct names for repeated regions provide clear orientation, while additional containers without navigational benefit remain intentionally neutral.
Landmark for each container
Landmark for each container Too many regions with little meaning lengthen the overview without improving structural navigation.
Multiple unnamed navigation menus Auxiliary tools report identical navigation areas between which no purpose or content is distinguishable.
Visual and semantic separation A clearly defined page area is semantically contained within a neutral container and remains hidden in the region overview.
Practical Example: "Landmark for Every Container"
An article page contains main navigation, topic index, and footer links; all three appear as unnamed navigation elements. They are labeled Main Navigation, Article Content, and Legal Information. The article itself resides uniquely within the `main` area, while purely aesthetic wrappers do not create an additional region.
Unique Main Area
Test criterion
Unique Main Area
Each page has exactly one `main` area, which contains the actual page content without global navigation or secondary functions.
Test criterion
Meaningful Regions
Header, navigation, search, supplementary content, and footer only receive a landmark if they form a recognizable page region.
Distinguishable Repetition Multiple navigation or complementary areas have accessible names that clearly describe their purpose rather than their position.
Meaningful Regions
Inventory recurring page areas according to their content purpose and assign appropriate native landmark elements.
Save exactly one main area per template and distinguish similar navigation and sub-areas with precise names.
Review the landmark list in multiple tools and remove or rename any region that does not provide helpful orientation.
Distinguishable Repetition
Proportion of important templates with exactly one main area and a consistent sequence of meaningful global regions.
Number of identical landmarks occurring multiple times that are not clearly named according to their purpose in the tool overview.
What to consider when using landmarks for a clear page structure
A suitable in-depth resource is available Clearly labeling PDFs, downloads, and external linksHow to clearly and accessibly label PDFs, downloads, and external links
In addition: Making contact options visible without overloading every page with CTAs.
If you want to put "Using landmarks for a clear page structure" into practice, you can find more information on... Robust Website Systems Refer back to this. The focus there is on "Native Semantics and Page Structure" and "Unique Main Area."
Conclusion: Use Landmarks for Clear Page Structure
Landmarks provide a rough map of the page and should therefore depict a few, meaningful regions. Repeated areas need names that clearly distinguish their purpose.
Sources and Further Information
These primary sources explain the assumptions, system boundaries, and testing methods used in "Using Landmarks for Clear Page Structure."
Headings – W3C Web Accessibility InitiativeOfficial implementation guide for heading ranks, content organization, and relationships to page regions.
ARIA in HTML — W3C RecommendationThe current W3C Recommendation defines which ARIA roles and attributes are permissible additions to HTML semantics and which redundant or contradictory uses should be avoided.
HTML Standard: Semantics – WHATWGPrimary specification for the semantic roles and structures of native HTML elements.
Key Thesis
Header, navigation, main content, and footer should have appropriate semantic areas. Multiple similar landmarks need distinguishable names without cluttering the page.
What This Is Not About
A mere visual inspection would not constitute reliable proof. The error patterns "Landmark for every container," "Multiple unnamed navigation menus," and "Visual and semantic separation" require their own checks.
What it's about
Three requirements limit the solution: "Distinctive main area," "Meaningful regions," and "Distinguishable repetition." They must be successfully implemented in a production environment.
Semantic HTML & Accessibility
Use Tables for Data, Not Layout
"Using landmarks for a clear page structure" includes, as a separate check, the question: Why should HTML tables be used only for tabular data and not for layout?
Semantic HTML & Accessibility
Making focus states visible without distorting the design
Supplementing "Using landmarks for a clear page structure" with a separate decision: How can clearly visible focus states be integrated into a design system?
Insights Overview
All VELUNO Insights at a Glance
Further analyses on Website Systems, digital visibility, and robust working models.
Meaningful Regions: The Path to Testing
A landmark overview from typical templates quickly reveals missing and superfluous regions. The correction should then be compared with the visual page model and the actual keyboard navigation.