How to Build Accessible Navigation Menus

Navigation is how visitors find everything else on your site, so if it fails for some people, nothing else matters. Menus with hover-only dropdowns, tiny targets, or unclear labels are among the most common accessibility barriers.

Start with solid structure

Use a nav element containing a list of links. That gives screen readers a navigation landmark and a clear count of items. If you have more than one navigation region, label each one, for example "Main" and "Footer." See skip links and landmarks.

Keep it keyboard-friendly

• Every link and control must be reachable with Tab and activated with Enter
• Focus order should follow the visual order
• Focus must be clearly visible. See keyboard navigation and focus
• Sticky headers shouldn't cover the focused element, which WCAG 2.2 addresses. See what changed in WCAG 2.2

Be careful with dropdowns

Hover-only submenus fail keyboard and touch users. A reliable pattern:

1. Make each parent item a link or a button
2. For a submenu, use a button that toggles it open and closed, with aria-expanded showing the state
3. Open it on click, Enter, or Space, not only on hover
4. Allow Escape to close it and return focus to the button
5. Keep submenus short and logical

Avoid complicated "mega menus" unless you can build them accessibly. Often, a simpler structure serves visitors better. See navigation best practices.

Indicate the current page

Mark the active link visually and with aria-current="page". Don't rely on color alone. See color blindness and web design.

Write clear labels

Use plain, specific link text such as "Pricing" or "Contact us." Avoid vague names and jargon. Make sure icon-only items have accessible names.

Make targets easy to hit

Links and buttons should have enough size and spacing. WCAG 2.2 AA sets a minimum target size of 24 by 24 CSS pixels, with 44 by 44 a widely recommended touch size. See touch target sizes.

Provide a skip link

Let keyboard users jump past the header straight to the main content. See skip links and landmarks.

Plan the mobile menu

On small screens, menus usually collapse. The toggle must be a real button with a visible label or clear icon and name, and the opened menu should be reachable by keyboard and screen reader. See mobile navigation patterns.

Keep it consistent

Use the same navigation in the same place on every page. Consistent navigation is a WCAG requirement and a usability win.

Provide more than one way to find pages

Search, a sitemap page, and in-page links give alternative routes. See website sitemap structure.

Test it

Unplug your mouse and try to use every menu with the keyboard alone. Then try with a screen reader. See how to test with a screen reader.

The bottom line

Use semantic nav lists, buttons for toggles, visible focus, and no hover-only tricks. If you can operate your menu without a mouse, most people can.