✎ Technique: Site and page navigation
Source: https://accessibility.huit.harvard.edu/technique-site-and-page-navigation Parent: https://accessibility.huit.harvard.edu/support-navigation-and-wayfinding
It's important to provide consistent navigation regions to navigate between a site's pages and—where there is a lot content on each page—between sections of pages.
Clear, logical and consistent navigation tools reliably help people find their way to the content they need and recover quickly when they are in the wrong place. This helps everyone but particularly people with visual, cognitive, or motor impairments who might otherwise find it time-consuming to locate the information they need.
Examples
✓ Site navigation
Each page on your site should have the same page-navigation block that’s situated in the same place. Conventionally, navigation often appears at the top of the page or somewhere within the page's header, along with the logo or site name. The order and number of links inside the navigation area should remain the same no matter where users are in the site.
Base the markup on a <nav> element or another element with role="navigation" that contains a list of links:
<nav>\
<ul>\
<li><a href="/">Home</a></li>\
<li><a href="/about">About</a></li>\
<li><a href="/products">Products</a></li>\
<li><a href="/contact">Contact</a></li>\
</ul>\
</nav>
After entering the navigation block and focusing the first link, screen readers will announce the navigation region, the list of four items, and the currently focused element (the first link).
✓ Page navigation
Websites like Wikipedia list the page’s sections in a separate navigation region that appears below the page's main heading and above its content. So if we were to follow along those lines, in the products page that’s linked to in the previous example, you might see this structure:
<h1>Products</h1>\
<nav aria-label="page sections">\
<ul>\
<li><a href="#chocolates">Chocolates</a></li>\
<li><a href="#candies">Candies</a></li>\
<li><a href="#gummies">Gummies</a></li>\
</ul>\
</nav>\
<h2 id="chocolates">Chocolates</h2>\
<!-- chocolates body content -->\
<h2 id="candies">Candies</h2>\
<!-- candies body content -->\
<h2 id="gummies">Gummies</h2>\
<!-- gummies body content -->
A few notes:
- To differentiate this in-page navigation area from the site navigation, this region has the "page sections"
aria-label. Screen readers would typically announce "page sections navigation region" when they encounter that. - The sections are linked using hash fragments (“#section-name”) and corresponding
ids. When a screen reader encounters a link that goes somewhere on the same page, it announces "same-page link." - The headings for the subsections are
<h2>elements. Because these subsections are immediately under a section that’s labeled with an<h1>, the headings in these subsections must take the next heading level down—in this case, level 2. - If you are able to edit the heading code, to better support Internet Explorer you should add
tabindex="-1"to each of the target headings. This overcomes a layout bug and makes sure focus is moved to the section.
See also: