Web Accessibility Cookbook

Chapter 7. Navigating Sites

This chapter looks at creating the main navigation for a website. It begins with the simplest possible solution, but with every recipe, you progressively improve the experience and functionality. You learn about each element’s and attribute’s responsibilities and different approaches to dealing with large, nested hierarchies. Toward the end of this chapter, you will discover why using too many or the wrong ARIA attributes can do more harm than good.

7.1 Create a Main Navigation

Problem

There are many different ways to build the main navigation of a website. Some solutions are over-engineered, while others don’t serve users enough functionality and information. HTML and ARIA offer many tools to improve the user experience, but writing semantically poor or too-rich markup can complicate the usage.

Solution

When a website reaches a specific size, we organize pages in larger sections and link them in a central, easily accessible place. These sections can take different shapes; we usually refer to them as navigations or menus.

A website’s main navigation can be as simple as a group of hyperlinks, as shown in Example 7-1.

Example 7-1. The simplest possible implementation of a main navigation

<a href="/home">Home</a>
<a href="/products">Products</a>
<a href="/team">Team</a>
<a href="/contact">Contact</a>

For small or medium-size websites, this simple pattern can be sufficient because it works well for most users, whether they’re accessing the site with ...