Operable · 2.4 Navigable
There must be more than one way to locate a web page within a set of pages, such as navigation menus, site search, a site map or a table of contents. Pages that are a step in, or the result of, a process are exempt.
Live demo
The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.
Visit each page and look at the ways it offers to reach other pages. Then think how you would get to Watering cans if you did not know it sits under Garden tools.
Tools, seeds and pots for gardens of every size.
Browse our spades, rakes, hoes and watering cans.
Our 10 litre steel can has a long spout for watering seedlings.
Tools, seeds and pots for gardens of every size.
Browse our spades, rakes, hoes and watering cans.
Our 10 litre steel can has a long spout for watering seedlings.
The tools follow the version you last used.
What happened
Why it passes
Every page has the menu and a search box, so someone can simply search for watering cans instead of guessing which section holds them.
Why it fails
The menu is the only way around the site. Watering cans can be reached only through one link inside the Garden tools page, so anyone who does not guess that section cannot find it.
Examples
Four examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.
Fails
Live preview
<header> <nav aria-label="Main"> <a href="/">Home</a> <a href="/garden-tools">Garden tools</a> <a href="/seeds">Seeds</a> </nav></header><!-- No search and no site map: /watering-cans is linked only from /garden-tools -->The menu is the only way to reach pages, and some pages hang off a single link inside another page. People who cannot find their way through the menu have no other route.
Passes
Live preview
<header> <nav aria-label="Main"> <a href="/">Home</a> <a href="/garden-tools">Garden tools</a> <a href="/seeds">Seeds</a> </nav> <form role="search" action="/search"> <label for="q">Search the shop</label> <input id="q" name="q" type="search"> <button type="submit">Search</button> </form></header>A search form in the header of every page gives a second way to reach any page besides the menu (technique G161).
Passes
Live preview
<footer> <a href="/site-map">Site map</a></footer> <!-- The /site-map page --><h1>Site map</h1><ul> <li><a href="/garden-tools">Garden tools</a> <ul><li><a href="/watering-cans">Watering cans</a></li></ul></li> <li><a href="/seeds">Seeds</a></li></ul>A site map lists every page in one place, so it is another way to reach each of them (technique G63).
Passes
Live preview
<!-- /checkout/payment is step 3 of 4, reached only from step 2 --><main> <h1>Payment details</h1> <p>Step 3 of 4</p></main>Pages that are a step in a process, such as a checkout's payment step, are exempt, so a single route to them is enough.
Why it matters
People find information differently: some search, some browse and some use a site map. Offering more than one route lets people with visual, cognitive and motor disabilities use the method that works best for them.
W3C: Understanding 2.4.5Level AA
Level AA is the level most laws and policies require.
Where it is required
Required where the law names WCAG 2.0 or later at this level: the United States, Canada, the European Union, the United Kingdom, France, Germany, Italy, Spain, the Netherlands, Ireland, Norway, Switzerland, India, Japan, Australia, New Zealand and Israel.
How to test
A few concrete steps. Automated tools find some failures; most need a person.
Common failures