Crowded Navigation Menus: A Common (and Fixable) Accessibility Issue

When you’re adding a shiny new page to your website, you might want to feature it in a prominent position — and the main navigation (nav) bar may seem like the perfect place. 

But over time, nav menus can become cluttered. We’ve seen websites with dozens of links in their header menus; activating the menu created an overwhelming experience for all users (and serious accessibility issues for users with disabilities). 

If you’re debating whether your nav menu is too complicated, here are a few concepts to keep in mind.

Do crowded nav menus violate WCAG?

The Web Content Accessibility Guidelines (WCAG) are the de facto standards for digital accessibility, so they’re a great resource to use when evaluating nav menus and other structural elements.

Crowded nav menus certainly violate the spirit of WCAG, since they make navigation much more difficult for everyone. That should be enough of a reason to start remediation. Of course, “crowded" is subjective, and defining it isn’t always easy. Let’s say you’ve got a navbar with six links; would one link really break the user experience? That’s tough to say.

With that said, some navigation menu implementations may cause an explicit violation of certain WCAG 2.2 criteria:

• 2.5.8 Target Size (Minimum): These guidelines specify that interactive elements, like menu items, should have a sufficiently large target size to be easily clicked or tapped. Crowded menus often have small or closely spaced targets, which can be difficult for some users to activate.
• 1.4.10 Reflow: This criterion requires that content can be presented without loss of information or functionality, and without scrolling in two directions. Crowded menus may fail this criterion if they force horizontal scrolling or cause content to overlap or become obscured when displayed with smaller viewports.
• 1.3.1 Info and Relationships: Requires that information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. Crowding might make it difficult to understand the relationships between different levels of navigation, particularly if large amounts of related links are grouped together.
• 3.2.3 Consistent Navigation (Level AA): This requires that navigational mechanisms that are repeated on multiple web pages within a set of web pages occur in the same relative order each time they are repeated. In some cases, crowded nav menus are inconsistent from page to page.

If you’ve tested your site against these requirements and you’re fully conformant, that’s fantastic — but as a rule of thumb, if you’re asking whether your navbar is too crowded, it probably is.

Related: Accessibility Do’s and Don’ts for Website Navigation

Here are a few quick ways to tst your navigation menus for accessibility

Basic manual tests can help you avoid common navbar accessibility issues:

• Test with a keyboard alone (no mouse). Can you navigate through all menu items with keyboard commands? Does the focus indicator clearly show your current position? 
• Zoom your page to 200%. Does everything still work? Are you forced to scroll in two directions (horizontal and vertical) to find certain links? 
• Test on different mobile devices and with different screen sizes. Is it easy to activate all of the links by touch? 

From an accessibility compliance perspective, you should also test your menu with a screen reader. However, we strongly recommend working with an accessibility partner for this — while developers can (and should) test content with screen readers, regular screen reader users have more aptitude with their software. 

Unless you have years of screen reader experience, your screen reader tests are prone to false negatives (missed accessibility barriers) and false positives (finding accessibility barriers that don’t actually bother real-life users).

Related: What Screen Readers Work Best for Web Accessibility Testing?

Keep navigation elements consistent, concise, and intentional

If you’re adding a page to your primary navigation menu, make sure you’ve got a really good reason to do so. Otherwise, it can live on the sitemap or in a submenu; your main navigation menu should be reserved for the most important pages (such as your accessibility statement).

Remember, your website’s structure should be consistent across all pages. Without consistent navigation, your audience might get confused and overwhelmed (regardless of their abilities). By prioritizing your user’s needs — and testing your content frequently — you’ll provide a better experience for everyone.

To learn more about the best practices of accessible design, download our free ebook: Developing the Accessibility Mindset. 

Or, to see how your website stacks up against WCAG requirements, get started with a free automated analysis from AudioEye.