Keyboard-Only Navigation: A 15-Minute Test Plan

Why keyboard testing matters

• Many users don’t use a mouse—by preference, injury, or assistive tech.

• Keyboard operability is core to WCAG 2.2 AA and improves conversion flows.

• It reveals issues automated scanners often miss (focus traps, hidden content, state changes).

What you need (and what to test)

You need: A laptop/desktop, the page URL, and 15 minutes.
Test pages first: Home, navigation hub, product/service, pricing, forms/checkout, contact.

The 15-minute test plan

1) Global navigation & skip link (2 minutes)

1. Press Tab on the top of the page.

2. Does a “Skip to content” link appear and jump to the main area?

3. Can you tab through the primary navigation in a sensible order?

4. Esc or closing actions should exit menus and return focus to the opener.

Pass if: Skip link works, nav items are reachable in order, and focus returns to the trigger after closing.

2) Content order & headings (2 minutes)

1. Tab/Shift+Tab through the main content.

2. Confirm the focus order follows visual order (no skipping into sidebars unexpectedly).

3. Use your browser’s headings outline or skim visually: there should be one H1 and logical H2/H3s.

Pass if: Keyboard order tracks the reading order and the structure is clear.

3) Links & buttons (2 minutes)

1. Move through links and buttons; activate with Enter (links) and Space/Enter (buttons).

2. Links should navigate; buttons should perform actions (open panels, submit forms).

3. Hover-only effects must also appear on focus.

Pass if: Actions behave as expected and focus styles are visible.

4) Forms & error handling (4 minutes)

1. Tab through each field; labels should be clear and connected.

2. Submit an empty form to trigger errors.

3. Errors should describe what to fix and focus should move to the first error or be easy to reach.

4. Try common fields with autocomplete (name, email, address).

Pass if: Every field is reachable, labelled, and errors are specific and easy to correct.

5) Components: modals, tabs, accordions, carousels (3 minutes)

1. Modals/dialogs: Open with a button. Focus should move inside, be trapped there, Esc should close, and focus should return to the trigger.

2. Tabs/accordions: Use Arrow keys (tabs) or Enter/Space (accordions). The active panel must be clearly indicated and announced to assistive tech.

3. Carousels: Must be pausable; operate with keyboard; no rapid auto-advance.

Pass if: No focus traps, controls are operable via keyboard, and state changes are obvious.

6) Focus visibility & feedback (2 minutes)

1. At all times, you should see where you are—a clear, high-contrast focus outline.

2. When content updates (form success, alerts), check there’s visible and contextual feedback.

Pass if: Focus is never invisible or obscured; messages are noticeable and helpful.

Common failures (and fast fixes)

• Hidden focus: Add a strong :focus-visible outline; avoid removing outlines.

• Wrong roles: Use <button> for actions and <a href> for navigation.

• Focus traps: For modals, trap focus inside and return to the trigger on close.

• Hover-only patterns: Mirror hover styles on :focus-visible.

• Unlabelled inputs: Add <label for> and group related controls with <fieldset><legend>.

Copy-paste scoring sheet (Markdown)

Page: __________________________   Date: __________   Tester: __________
Result: ☐ Pass  ☐ Needs fixes

Navigation & skip link ......... ☐ Pass ☐ Issue _________________________
Content order & headings ........ ☐ Pass ☐ Issue _________________________
Links & buttons ................. ☐ Pass ☐ Issue _________________________
Forms & error handling .......... ☐ Pass ☐ Issue _________________________
Modals/tabs/accordions/carousels  ☐ Pass ☐ Issue _________________________
Focus visibility & feedback ..... ☐ Pass ☐ Issue _________________________

Top 3 fixes:
1) ______________________________________________________________
2) ______________________________________________________________
3) ______________________________________________________________

Quick tips for teams

• Add this test to your definition of done for new pages/components.

• Re-test after design changes and script updates (nav, modals, carousels).

• Pair manual checks with automated scans to catch obvious code issues.

How Adjustable helps

After you fix structural issues, Adjustable gives every visitor control:

• Contrast and text-size settings improve readability and time on page.

• Reading aids and motion preferences reduce friction in key funnels.

• Easy install, visible inclusivity—ideal for Marketing Managers and Website Owners who need results now.

Try Adjustable

FAQs

Do I need to test every page?
Start with top landing and conversion pages, then apply fixes to shared templates so wins roll out site-wide.

Is keyboard testing enough for compliance?
It’s essential but not sufficient. Combine with screen reader checks, contrast fixes, and automated rules.

How do I prevent regressions?
Bake this plan into your release checklist and add a lightweight CI accessibility check for key templates.

Next steps

• Run this test on your top 5 pages today.

• Fix the focus, labels, and modal behaviour you uncover.

• Add Adjustable to enhance readability and comfort for all visitors.

• Read next: CI/CD for Accessibility