Lesson 10: Navigation

Navigation links help users move between pages or sections of a site. We use the <nav> wrapper tag to identify navigation menus on the page.

We have different types of navigation menus: section links (table of contents), breadcrumbs (path back to home), and global menus (links to main pages).

Always keep your site navigation simple and clean.

Skip to content link#

A skip link lets keyboard-only users jump straight to the main content, bypassing headers and navigation menus. It should be the very first link on your page.

<a href="#main" class="skip-link button">Skip to main content</a>

When activated, it focuses the main content container.

<main id="main"></main>

This is a huge convenience for keyboard users, since they do not have to tab through dozens of navigation links on every page load.

You can hide this link visually using CSS styles, but it must appear on screen as soon as a user tabs onto it.

Table of contents#

On small screens, a page’s table of contents usually sits right under the heading. On wider screens, it is often displayed in a sidebar.

We use the <nav> element for these blocks. It tells screen readers that this is a navigation area.

You should give the navigation block a label. If you have visible text on screen, use the aria-labelledby attribute pointing to that element’s ID.

<nav aria-labelledby="tocTitle">
  <p id="tocTitle">On this page</p>
</nav>

Using visible text is better than using an aria-label string because translation tools (like Google Translate) can translate visible text.

If you choose to use aria-label instead of visible text, describe the purpose directly.

<nav aria-label="Table of Contents">
  <p>On this page</p>
</nav>

Do not include the word “navigation” in your label. Screen readers already announce the <nav> tag as a navigation section.

Using list tags inside navigation is best practice. It helps screen readers tell users exactly how many links are in the menu.

<nav aria-labelledby="tocTitle">
  <p id="tocTitle">On this page</p>
  <ul role="list">
    <li>
      <a href="#skip">Skip to content link</a>
    </li>
    <li>
      <a href="#toc">Table of contents</a>
    </li>
  </ul>
</nav>

Avoid changing focus order#

Avoid using duplicate sets of links just to show different versions on different screen sizes. Use CSS styles to hide or show parts of the same markup.

Also, keep your tab order consistent. Keyboard users do not expect the order of focusable items to jump around when they resize their browser window.

Page breadcrumbs#

Breadcrumbs are secondary navigation markers showing the path back to the home page.

Breadcrumbs give users a quick way to jump to parent sections without clicking the browser back button repeatedly.

<nav aria-label="breadcrumbs">
  <ol role="list">
    <li>
      <a href="/">Home</a>
    </li>
    <li>
      <a href="/learn">Learn</a>
    </li>
    <li aria-current="page">HTML</li>
  </ol>
</nav>

The breadcrumb container gets a label to separate it from other navigation areas on the page.

Separators between links (like / or >) should be visual decorations only. You can generate them using CSS so screen readers ignore them.

Using an ordered list (<ol>) is preferred because breadcrumbs represent a step-by-step path.

Current page#

When you list the current page in the breadcrumb, make it plain text instead of a link, and add aria-current="page" to the list item.

Local navigation#

Local navigation sidebars list related articles or categories. Visual users should see a clear difference for the current page link, and you should flag it with aria-current="page".

<li>
  <a aria-current="page" aria-selected="true" href="/learn/html/navigation">
    Navigation
  </a>
</li>

Global navigation#

Global navigation lists top-level site categories and remains identical across every page of your site. It provides a consistent path to any page on your site.

Similarly, site footers should be consistent across all pages, hosting copyright details, terms, and external social links.

Adapted from Learn HTML © Google and contributors, licensed under CC BY 4.0 (prose) and Apache 2.0 (code samples).