Web Accessibility Cookbook

Chapter 2. Structuring Pages

In Chapter 1, you learned that landmarks can be useful for accessing major areas of the site, like the header, main content, or footer. Page-specific landmarks like the navigation (Recipe 2.1) or search (Recipe 2.2) can help users be even more efficient. Especially on complex pages with a lot of structured content and different elements, providing a shortcut to certain crucial parts of the UI can be of great help.

2.1 Create Navigation Landmarks

Problem

No matter how users access a website, they must be able to identify navigations. Otherwise, they may not be able to find the content they’re looking for, orient, and navigate.

Solution

Identify navigations and enable quick access for significant groups of links, such as the main navigation (see Example 2-1), breadcrumbs (see Example 2-2), or local navigations (see Example 2-3).

Example 2-1. The main navigation of a site

<header>
  <nav aria-label="Main"> 
    <ul>
      <li><a href="/home">Home</a></li>
      <li><a href="/products" aria-current="page">Products</a></li> 
      <li><a href="/team">Team</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>

Unique accessible name for the landmark. More on that ...