Keep Navigation Consistent
Predictability builds trust. It also reduces mental strain, especially for users with cognitive, memory, or attention-related disabilities.
That’s why WCAG requires navigation and repeated components to stay consistent across pages. The goal is to help users form expectations about where things are and how to use them — even as they move through different sections of your site.
If your main nav moves around, or buttons look different in each context, users can get confused or disoriented.
Good Practice
- Keep main navigation in the same location and order on every page
- Ensure repeated components (like headers, sidebars, footers, search boxes) appear visually and structurally consistent
- Use the same style and interaction patterns for recurring buttons or links
Example:
If your primary nav has “Home | About | Blog | Contact” on the homepage, don’t shuffle it to “Contact | Home | Blog | About” on another page, even if it looks similar.
Applies To:
- Navigation menus (main, sub, mobile, etc.)
- Global components (header, footer, site search)
- Action buttons (e.g., “Edit”, “Save”, “Submit”)
- Breadcrumbs
- Icons or widgets that appear across multiple views
Consistent:
- Same structure
- Same interaction (keyboard + mouse)
- Same visual placement
- Same labels/icons
Inconsistent:
- Navigation links rearranged or missing
- Button behavior changing based on page
- Forms styled completely differently across pages
- Same element (e.g. cart icon) acting differently in mobile vs desktop without explanation
Pro Tip
Don’t just visually compare your pages, inspect also the DOM. For screen reader users, consistent markup order is just as important.
You can also test your pages using keyboard-only navigation. Do menus appear in the same tab order on every page? Do headings follow the same structure?
Do this today: Open three pages on your site, for example, the homepage, an article, and the contact form. Check:
- Are nav links in the same order?
- Do buttons look and behave the same?
- Is the search bar always in the same spot?
If not, adjust your layout or component usage to make your interface more predictable and consistent.