Accessible Structure

Landmark Labeling

Regions Make Pages Navigable

A small portal layout grows landmark by landmark so readers can scan both the visual page and the document structure.

Program

Landmark elements help people jump through a page. Visible layout and accessible page regions should describe the same structure.

Good landmarks make the visual page and assistive navigation agree.DOM Tree and Accessibility Treevisible regions become named navigation targetsDOM treeAccessibility treebodynavmainfooterdocumentNavigationMainContent infoGood landmarks make the visual page and assistive navigation agree.
Figure: Landmarks appear as named accessibility regions. Model source: books/html/06accessible_structure/landmark_labeling/diagrams/a11y_tree.semantic.json.
landmark_labeling.html 
<header>Portal</header>
<nav aria-label="Primary"><a href="/docs">Docs</a></nav>
<main><h1>Account</h1></main>
<aside aria-label="Tips">Use strong passwords.</aside>
<footer>Support</footer>
landmark region A landmark is a major page region such as navigation, main content, complementary content, or footer.
aria-label An aria-label distinguishes regions when visible text alone is not enough.