guidelines
Layout and navigation.
A layout that stays the same from page to page: the same menu in the same order, a skip link and a clear mark on the current page. 12 guidelines.
| Guideline | Priority | WCAG 2.2 |
|---|---|---|
| Provide a skip link as the first focusable element | High | 2.4.1 |
| Mark the current page in the nav both visually and programmatically | Medium | 2.4.8 |
| Keep navigation identical in content and order on every page | Medium | 3.2.3 |
| Show breadcrumbs on any hierarchy deeper than two levels | Medium | - |
| Label each nav landmark when a page has more than one | Medium | 1.3.1 |
| Link text must describe the destination on its own | High | 2.4.4 |
| Never override native scrolling behavior | Medium | - |
| The mobile menu toggle is a real button with expanded state | Critical | 2.1.1 |
| Cap top-level navigation at 5-7 items | Low | - |
| Every distinct view gets a URL and a working Back button | High | - |
| Dropdown menus open on click and forgive imprecise pointers | High | 1.4.13 |
| Offer site search once content outgrows the nav (roughly 50+ pages) | Medium | - |
High priority
Provide a skip link as the first focusable element
WCAG 2.2 success criterion 2.4.1.
Do
Add 'Skip to content' as the first tab stop, visually revealed on focus, targeting the <main> element's id
Avoid
Force keyboard users to tab through 40 header links on every page, or hide the skip link with display:none so it can never receive focus
On the Health Report
The report checks this: every page has a skip link.
Medium priority
Mark the current page in the nav both visually and programmatically
WCAG 2.2 success criterion 2.4.8.
Do
Set aria-current="page" on the active link and style it with weight or underline, not color alone, so users always know where they are
Avoid
Render all nav links identically, leaving users to infer their location from the URL bar
Medium priority
Label each nav landmark when a page has more than one
WCAG 2.2 success criterion 1.3.1.
Do
Give every <nav> a distinct aria-label ('Primary', 'Footer', 'Breadcrumb') so landmark navigation in screen readers stays usable
Avoid
Ship four anonymous <nav> elements that all announce as just 'navigation'
High priority
Link text must describe the destination on its own
WCAG 2.2 success criterion 2.4.4.
Do
Write 'View the API changelog' - it works when a screen reader lists links out of context and improves scanning for everyone
Avoid
Write 'Click here' or 'Read more' six times on one page: identical labels, different destinations
Medium priority
Never override native scrolling behavior
Good practice, no WCAG criterion.
Do
If you want sectioned scrolling, use CSS scroll-snap with proximity so users keep full control and native momentum
Avoid
preventDefault the wheel event to play a canned full-page animation - it breaks trackpads, keyboards and vestibular comfort
Low priority
Cap top-level navigation at 5-7 items
Good practice, no WCAG criterion.
Do
Promote the 5-7 highest-traffic destinations; group the rest under one clearly labelled section like 'Resources'
Avoid
Cram 14 links into the header so nothing stands out and mobile wraps to three lines
High priority
Every distinct view gets a URL and a working Back button
Good practice, no WCAG criterion.
Do
In SPAs, push a history entry per route and restore state on popstate; deep links, refresh and Back must all land on the same view
Avoid
Swap views with element.innerHTML while the URL never changes - Back exits the site and views cannot be shared or bookmarked
High priority
Dropdown menus open on click and forgive imprecise pointers
WCAG 2.2 success criterion 1.4.13.
Do
Toggle on click; if you also open on hover, keep the panel open while the pointer crosses to it (~300ms grace) and close on Escape and on focus leaving the menu
Avoid
Open on hover only and close the instant the pointer exits by one pixel, with no keyboard path and no way to dismiss
Medium priority
Offer site search once content outgrows the nav (roughly 50+ pages)
Good practice, no WCAG criterion.
Do
Expose a search input in the header inside a search landmark; on docs and commerce sites, search is the primary navigation for returning users
Avoid
Bury search behind an unlabeled icon three taps deep, or omit it and expect users to walk a five-level tree
See how your website reads on a phone.
Run the free website health check on any site, then keep it easy to read with the Website Health Report each month.