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
Visuals: captured from real browser rendering
<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>

  1. Add the site header.

    A Portal header appears at the top of the page.
    Header marks introductory site content.

  2. Add labeled primary navigation.

    A Docs navigation link appears under the header.
    The nav landmark is named Primary by aria-label.

  3. Add the main account region.

    The Account main content region appears.
    Main identifies the page-specific content.

  4. Add complementary tips.

    A Tips panel appears next to the main content.
    Aside marks complementary content rather than the primary task.

  5. Add support footer content.

    The page now has header, nav, main, tips, and footer regions.
    Footer completes the page landmarks with support information.
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.