Navigation Testing

title: "Navigation Testing — Verifying Navigation Accessibility" description: "Learn how to test navigation components for accessibility using keyboard-only testing, screen reader landmark verification, and automated audit tools." weight: 14 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, navigation]

Testing navigation accessibility requires keyboard-only navigation, screen reader landmark verification, and automated checks for ARIA attributes and focus order.

## What You'll Learn

How to test navigation components using multiple methods to verify they work for all users.

## Why It Matters

Navigation is the most-used component on any site. A broken navigation blocks access to every page. Testing ensures all users can find and use it.

## Real-World Use

A QA tester verifies navigation for an e-commerce site. They Tab through the mega menu, verify arrow keys open submenus, check landmarks with NVDA, and run axe DevTools to confirm no ARIA violations.

## Keyboard Test Checklist

| Test | Action | Expected |
|------|--------|----------|
| Tab to skip link | Tab on page load | Skip link visible |
| Skip link activation | Enter on skip link | Focus moves to main |
| Navigation items | Tab through | Each item focusable |
| Submenu open | Enter/Space on trigger | Submenu appears |
| Submenu navigate | Arrow keys | Move between items |
| Submenu close | Escape | Menu closes, focus returns |
| Tab order | Tab through all | No jumps, logical order |

## Screen Reader Testing

// NVDA Commands for Navigation Testing // Insert + F7: Element list - verify landmarks appear // B: Move to next landmark // Shift + B: Move to previous landmark // Arrow keys: Navigate lists // H: Navigate by heading

// Verify announcements: // "navigation, Main" - labeled nav element // "About, link" - standard link // "About, current page, link" - current page // "Products, expanded, button" - open submenu

## Automated Testing

```javascript
// axe-core programmatic test for navigation
const results = await axe.run(document, {
  runOnly: ['color-contrast', 'aria-allowed-role', 'aria-valid-attr']
});
const navIssues = results.violations.filter(v =>
  v.nodes.some(n => n.target.includes('nav'))
);

Common Mistakes

1. Testing only with mouse

Navigation must work without a mouse. Keyboard-only testing reveals most navigation issues.

2. Not testing with multiple screen readers

NVDA, JAWS, and VoiceOver handle landmarks and ARIA attributes differently. Test with at least two.

3. Forgetting mobile testing

Touch navigation on mobile has different patterns (hamburger menus, larger targets).

4. Not verifying focus indicators

Ensure each navigation item has a visible focus ring. Default outlines may be removed by CSS.

5. Not testing aria-current

Verify that aria-current is set correctly on the current page and that screen readers announce it.

Practice Questions

1. What is the first thing to test on any navigation? Verify that a skip link exists and is the first focusable element on the page.

2. How do you test landmark navigation in NVDA? Open the element list (Insert + F7), select Landmarks tab, and verify all navigation landmarks appear with labels.

3. What should happen when you press Escape on an open submenu? The submenu should close and focus should return to the trigger button.

Challenge: Create a test suite for a navigation component. Include 10 test cases covering keyboard, screen reader, and automated checks. Run the tests and document results.

FAQ

Mini Project

Write a playbook for testing navigation accessibility. Include 15+ test cases covering keyboard, screen reader, landmarks, focus management, and mobile patterns. Run the tests on a real site.

What's Next

Apply everything you learned in the Navigation Project by building a complete accessible navigation system from scratch.