Operable · 2.4 Navigable
Information about the user's location within a set of web pages must be available, for example through breadcrumbs, a site map, or navigation that highlights the current page or section.
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.
Open the Cash ISA page and look for signs of where it sits in the site. Then check whether the menu shows which section you are in.
Bank, save and borrow with us.
Compare our easy access and fixed rate accounts.
Save each year without paying tax on the interest.
Bank, save and borrow with us.
Compare our easy access and fixed rate accounts.
Save each year without paying tax on the interest.
The tools follow the version you last used.
What happened
Why it passes
A breadcrumb trail reads Home, Savings, Cash ISA, and the menu marks Savings as the current section, on screen and with aria-current, so everyone can tell where the page sits.
Why it fails
Only the page heading changes. Nothing shows that Cash ISA belongs to Savings, and the menu looks the same on every page, so people who lose track have nothing to reorient by.
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
<nav aria-label="Main"> <a href="/">Home</a> <a href="/savings">Savings</a> <a href="/mortgages">Mortgages</a></nav><h1>Cash ISA</h1>Nothing in the menu or around the heading shows that this page sits inside Savings, so people who arrive from a search or lose track cannot tell where they are.
Passes
Live preview
<nav aria-label="Breadcrumb"> <ol> <li><a href="/">Home</a></li> <li><a href="/savings">Savings</a></li> <li><a href="/savings/cash-isa" aria-current="page">Cash ISA</a></li> </ol></nav>The trail shows the path from the home page to this one, and aria-current tells screen reader users which item is the current page (technique G65).
Passes
Live preview
<nav aria-label="Main"> <a href="/">Home</a> <a href="/savings" class="current" aria-current="true">Savings</a> <a href="/mortgages">Mortgages</a></nav>The current section is styled differently through the current class and exposed to screen readers with aria-current, so everyone can see which part of the site they are in (technique G128).
Passes
Live preview
<head> <meta charset="utf-8"> <title>Cash ISA – Savings – Northbank</title></head>The title names the page, its section and the site, so the page's place in the site is announced on arrival and shown in the tab (technique G127).
Why it matters
People with cognitive disabilities, limited short-term memory or low vision, and screen reader users who lack the visual overview, can understand where they are and how the page relates to the rest of the site.
W3C: Understanding 2.4.8Level AAA
Level AAA is the highest level. It is not required for whole sites, but it is worth meeting where you can.
Where it is required
No law on this site requires Level AAA criteria for whole sites.
How to test
A few concrete steps. Automated tools find some failures; most need a person.
Common failures