Use landmark regions correctly

Landmark regions allow screen reader users to quickly identify and jump to major sections of a page, significantly improving navigation efficiency.

Quick Reference

• Use HTML5 landmark elements like <header>, <nav>, <main>, and <footer>
• Ensure each landmark appears only once where appropriate (e.g., one <main>)
• Provide labels for multiple landmarks of the same type using aria-label

Check

Verify that the page uses appropriate HTML5 landmark elements and that they are correctly structured.

Fix

Replace generic <div> containers with semantic landmark elements like <header>, <nav>, <main>, and <footer>.

Explain

Explain how landmark regions assist assistive technology users in navigating complex page layouts.

Code Review

Review the rendered markup and interactive states that affect Use landmark regions correctly. Flag exact elements, roles, labels, focus behavior, or keyboard interactions that violate the rule, and note how to verify the fix with browser accessibility tooling or assistive tech.

For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/en/rules/accessibility/landmark-regions