WCAG 2.2 · Guideline 2.4 · Operable
Navigable
Readers have to be able to find their way around and know where they are.
Navigation does two jobs and this guideline covers both. It tells a reader where they are, through the page title, the headings, and a focus ring you can actually see. And it gets them somewhere else, through link wording that says where it leads and some way past the same header on every page. Getting around is work. For somebody hearing the page once, in the order the markup gives it, getting around is most of the work.
Eight A/AA success criteria live here, out of 13 in total, which ties guideline 2.4 with 1.4 Distinguishable as the biggest in the standard. Four of the eight are worth reading closely, because each asks for less than the folklore around it. Focus order does not have to match the visual layout, only preserve meaning. Page titles do not have to be unique, only descriptive. A skip link is one route past a repeated header and headings and landmarks are others. And reading a link list stripped of its surroundings is the Level AAA test rather than the Level A one. Guideline 2.4 sets the goal. Those eight rules are what an audit marks against.
- Rules
- 8
- Level A
- 4
- Level AA
- 4
- Human testing only
- 3
All 8 Navigable rules
- 2.4.1Level ABypass BlocksA mechanism has to exist for getting past blocks of content that repeat from page to page, and that mechanism can take more than one shape.Partly scannable10 fixes
- 2.4.2Level APage TitledA page needs a title that describes its topic or its purpose.Partly scannable5 fixes
- 2.4.3Level AFocus OrderWhere a page can be tabbed through and the order changes what it means or how it works, focus has to move in an order that preserves both.Human testing8 fixes
- 2.4.4Level ALink Purpose (In Context)A link's purpose has to be clear from its own text, or from its text plus the context the code puts it in.Partly scannable22 fixes
- 2.4.5Level AAMultiple WaysAny page in a set of pages has to be findable more than one way, and W3C documents six routes.Human testing8 fixes
- 2.4.6Level AAHeadings and LabelsWhere headings and labels exist, they have to describe the topic or the purpose of what they head or label.Partly scannable4 fixes
- 2.4.7Level AAFocus VisibleA keyboard-operable interface has to have a mode of operation where the focus indicator is visible.Partly scannable9 fixes
- 2.4.11Level AANew in 2.2Focus Not Obscured (Minimum)This criterion is new in WCAG 2.2.Human testing2 fixes
Level AAA in this guideline
5 enhanced criteria sit under 2.4. They are outside the level almost every law names, so our audits treat them as reference rather than scope. Some are still worth adopting, and the Level AAA hub says which.
- 2.4.8Level AAALocationA reader has to be able to work out where they are inside a set of pages.Not graded7 fixes
- 2.4.9Level AAALink Purpose (Link Only)Link text has to identify where the link goes, on its own, with no help from the sentence around it.Not graded15 fixes
- 2.4.10Level AAASection HeadingsWhere content is organized into sections, those sections need headings.Not graded2 fixes
- 2.4.12Level AAANew in 2.2Focus Not Obscured (Enhanced)When a component takes keyboard focus, no part of it may sit under anything you added to the page.Not graded1 fixes
- 2.4.13Level AAANew in 2.2Focus AppearanceThe focus indicator has to be big enough and different enough to see.Not graded5 fixes
What goes wrong here
These are the failures we find repeatedly under 2.4, across sites of every size.
- Page titles do not describe their page. The bar is that a title identifies the topic or purpose. That is lower than being unique and a good deal higher than being present.
- There is no way past the same fifty navigation links on every page. Two approaches satisfy this: a link that skips the block, or structure that lets the block be skipped or collapsed. Landmarks and real headings are how the second one usually gets built.
- Link text does not identify where the link goes, judged with its programmatic context. "Read more" can pass when the markup genuinely associates it with its sentence, list item or cell, and fail when the association is only visual.
- Focus order stops making sense after a layout change. The test is whether meaning and operability survive, not whether the tab order matches the visual order pixel for pixel.
- Focus indicators are removed for tidiness, or the focused element scrolls under a sticky header. At AA the failure is the element being entirely hidden.
Who it affects
- Screen reader users, who often pull up a list of links or headings and read it with nothing around it.
- Keyboard users, who need a visible focus indicator to know what pressing Enter is about to do.
- People with cognitive disabilities, who use titles and headings to keep their place in a long process.
- Anyone with twenty tabs open, where the page title is the only thing telling one from another.
How to work through it
- 1Read the titles across a section of the site and ask whether each one describes its own page. Two pages may legitimately share a title if they genuinely cover the same topic.
- 2Tab from the very top and confirm you can get past the repeated header without walking through all of it. A skip link is one passing answer and a structural route is the other, so a missing skip link is not a finding on its own.
- 3If a skip link is the route the site took, check that it actually moves focus to the main content rather than to an invisible target that goes nowhere.
- 4Read each link with the context the markup associates with it, since that is what the AA rule lets link text lean on. Reading the link list cold is the AAA test, and even there a mechanism that expands the link satisfies it, so treat what it turns up as a stretch goal.
- 5Check that a reader can find any page two different ways, through search, a site map, a table of contents or navigation. Steps inside a process are excepted, which is why a checkout does not need a search box.
- 6Read the headings and the form labels and ask whether each one describes what follows it. Descriptive is the requirement; clever is not.
- 7Tab the whole page watching only the focus ring, then scroll while something is focused and check nothing covers it entirely.
How the levels build
Level A covers four: bypassing blocks, page titles, focus order, and link purpose read with its context. Level AA adds four more. Multiple ways to reach a page, descriptive headings and labels, a visible focus indicator, and, new in WCAG 2.2, the focused element never being entirely hidden by something the author added. Level AAA adds five and tightens three of the AA rules rather than introducing new subjects. Link purpose has to work from the link text alone, or through a mechanism the reader can reach. Nothing may obscure the focused element even partly. Location has to be available inside a set of pages. Section headings organise the content. And focus appearance gets a measurable test: an indicator at least as large as a 2 CSS pixel perimeter around the component, at 3 to 1 between the focused and unfocused states of the same pixels, with exceptions where the browser draws the indicator and the author has not touched it.
Other Operable guidelines
- 2.1Keyboard AccessibleEvery task has to be finishable from the keyboard alone.
- 2.2Enough TimeTime limits and moving content have to be under the reader's control.
- 2.3Seizures and Physical ReactionsNothing on the page may flash or move in a way that can hurt somebody.
- 2.5Input ModalitiesTouch, pointer, voice, and motion all have to work, not only the keyboard.
Part of the Operable principle · browse by level: Level A · Level AA · or the full 55-rule library.
See how your site does against these rules.
An expert review plus a real blind screen-reader user, on up to 10 pages, every finding with its screenshot, criterion, and fix. $499, report in 5 business days.