Use Landmarks

Why It Matters

• Screen reader users navigate by landmarks. Without landmarks, screen reader users must tab through the entire page sequentially to find what they need. With landmarks, they can jump directly to the navigation, the main content, or the footer in one step.
• It makes your page structure explicit. Landmarks force you to think about the logical organization of your page. A page with clear landmarks has clear structure — and that clarity benefits every user and every tool that tries to understand your content.
• It is expected by assistive technology. Modern screen readers actively look for landmarks and present them as navigation shortcuts. Pages without landmarks feel disorganized and frustrating to navigate for users who depend on this feature.
• HTML5 elements do the work for you. Using semantic elements like <header>, <nav>, <main>, <aside>, and <footer> automatically creates landmarks. You get accessibility benefits by simply using the right HTML elements.

How to Implement It

1. Use semantic HTML elements. Wrap your page header in <header>, your navigation in <nav>, your primary content in <main>, sidebars in <aside>, and your page footer in <footer>. These elements automatically create landmarks.
2. Use only one <main> element. Each page should have exactly one <main> element containing the primary content. This tells assistive technology where the core content lives and provides a reliable jump target.
3. Label duplicate landmark types. If you have multiple <nav> elements (like a primary navigation and a footer navigation), give each one a unique aria-label so screen reader users can tell them apart. "Primary navigation" and "Footer navigation" are much more helpful than two unlabeled "navigation" landmarks.
4. Ensure all content lives within a landmark. Every piece of content on the page should be inside a landmark region. Content floating outside of any landmark is "orphaned" and harder for screen reader users to find and contextualize.
5. Keep the structure consistent across pages. Users learn your site's landmark structure and expect it to remain the same from page to page. Consistent placement of header, navigation, main, and footer landmarks builds familiarity and efficiency.

Common Mistakes

• Using divs for everything. A <div> has no semantic meaning. Wrapping your page in <div id="header">, <div id="nav">, and <div id="main"> does not create landmarks. Use the actual semantic elements instead.
• Overusing landmarks. Not every section of the page needs to be a landmark. Too many landmarks create noise and make the landmark list as overwhelming as tabbing through the full page. Stick to the major structural regions.
• Forgetting to label duplicate landmarks. Multiple navigation or complementary landmarks without unique labels force screen reader users to enter each one to figure out which is which. Always label duplicates clearly.
• Nesting landmarks incorrectly. A <main> element should not be inside a <header> or <aside>. Landmarks have a logical hierarchy — main content is a top-level region, not a subsection of something else.