Landmarks and Regions

What are Landmarks/Regions?

Landmarks (also referred to as regions) are structural elements that divide a webpage into meaningful sections, such as banners, navigation, main content, and footers. They are defined using HTML5 semantic elements (e.g., <main>, <nav>, <header>, <footer>, <aside>, <section>) or ARIA role attributes (e.g., role="main", role="navigation").

How Do Landmarks and Regions Impact Accessibility?

As mentioned above, landmarks and regions are semantic HTML5 elements that define key areas of a webpage. They give structure to your content, helping assistive technologies understand and navigate the page more efficiently. Proper use of landmarks makes webpages more predictable, organized, and easier for all users to interact with. 

• Semantic HTML5: These elements provide a clear structure that screen readers can easily identify. 

• Efficient navigation: Landmarks allow screen reader users to quickly jump to important sections of a page, bypassing repetitive content like headers or navigation menus. This significantly improves navigation efficiency and reduces cognitive load.

• Orientation: They provide users with a clear understanding of the page's structure and their current location within it. This helps prevent disorientation, especially on complex pages.

• Consistency: Consistent use of landmarks across a website ensures predictable navigation, which is crucial for users who rely on consistent design patterns.

For example, say a screen reader user is visiting a news website. By using landmarks like <header>, <nav>, <main>, and <footer>, the user can jump straight to the main content, skip repetitive navigation menus, or move directly to related articles in the footer. With a more structured navigation, users can find what they need more quickly without getting lost on the page.

What WCAG Success Criteria are Relevant for Landmarks and Regions?

Using landmarks and regions appropriately enables you to meet the two WCAG success criteria below:

• 1.3.1 Info and Relationships (Level A): Requires that the structure and relationships conveyed through presentation (such as different regions of a page) can be programmatically determined. Using ARIA landmarks or semantic HTML elements fulfills this.

• 2.4.1 Bypass Blocks (Level A): A mechanism must be available to bypass blocks of content repeated on multiple web pages. Landmarks provide this mechanism by allowing users to jump directly to the main content or other relevant sections.

How do I Maximize Accessibility When I code Landmarks and Regions?

When coding landmarks and regions, you need to ensure you’re using the right tools. This ensures that landmarks are clear, consistent, and truly helpful for users. Here’s a few best practices to follow:

How do I Test the Accessibility of Landmarks and Regions?

Testing landmarks and regions is essential to make sure users can actually benefit from the structure you’ve coded. A landmark that looks correct in HTML may not behave as expected with assistive technology unless you verify it. 

Below are a few reliable ways to test landmarks for accessibility:

Screen Readers, e.g., VoiceOver, NVDA, JAWS

Use a screen reader to confirm that all landmarks are announced and navigable. 

For example, NVDA users can press ‘D’ to move through landmarks or , while VoiceOver users can open the ‘Rotor’ (Control + Option + U) to view a list of all landmarks on a page. These tools let you quickly check whether landmarks are present, correctly labeled, and in a logical order.

Automation

Using automated tools can highlight landmarks and their hierarchy. For example, the WAVE Evaluation Tool, specifically the "Structure" tab, identifies landmarks and helps verify their presence and hierarchy. This is especially useful in spotting missing regions or mislabelled elements.

Remember: Automated tools can’t catch everything. They can only provide a quick overview of what landmarks are in place. You’ll want to use expert testing to ensure landmarks are truly accessible.

Keyboard-Only Navigation

Many skip links and navigation shortcuts rely on landmarks as targets. Test your page using only the keyboard to make sure these links are focusable and actually move users to the intended region. This ensures that users who cannot use a mouse still benefit from your landmark structure.

How Can I Learn More About Accessible Landmarks and Regions?

Landmarks and regions are the backbone of accessible page structure, and mastering them takes both practice and exploration. To go deeper:

• Study ARIA labeling techniques: Learn how to use aria-labelledby or aria-label to provide clear, human-readable names for regions, especially when you have multiple <nav> or <aside> elements. Proper labeling gives screen reader users extra context and prevents confusion. 

• Explore official guidance: The W3C WAI-ARIA Authoring Practices and WCAG Documentation offer in-depth explanations and examples.

• Experiment with testing tools: Try screen readers and browser extensions to experience for yourself how landmarks are announced and navigated. The more you are proactive, the more intuitive it becomes

• Follow accessibility communities: Blogs, forums, and communities like A11y Project or WebAIM regularly share practical tips and updates on best practices. 

The bottom line: The more you experiment and test your work, the more natural it becomes to design pages with landmarks that make navigation seamless.