Lesson 14 / 26

Landmarks

Use landmark regions and labelled navigation so users can jump between the main areas of a page quickly.

Landmark elements

<header> (banner), <nav> (navigation), <main> (main content, should appear once), <aside> (complementary), <footer> (contentinfo). Screen readers announce these and let users jump between them.

Landmark layout

Basic page structure with landmarks.

<header>
  <nav>Main navigation</nav>
</header>

<main>
  <article>Page content</article>
</main>

<aside>
  Sidebar or related links
</aside>

<footer>
  © 2024 Company
</footer>

Multiple navigation regions

Use aria-label to distinguish multiple <nav> elements: <nav aria-label="Main"> vs <nav aria-label="Footer"> etc.

Multiple nav landmarks

Use aria-label to distinguish multiple nav elements