Landmark Labeling

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.

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.