Keyboard-Only Navigation: A 15-Minute Test Plan

Why Keyboard Testing Is Important

• Many users don't use a mouse—whether by choice, due to injury, or because of assistive technology.

• Keyboard accessibility is essential for WCAG 2.2 AA compliance and enhances conversion paths.

• It exposes issues that automated scanners often overlook (focus traps, hidden content, state changes).

What You'll Need (and What to Test)

You'll need: A laptop/desktop, the page URL, and 15 minutes.
Test these 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 at the top of the page.

2. Does a “Skip to Content” link appear, allowing you to jump to the main section?

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

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

Pass if: Skip links function correctly, navigation items are accessible in order, and focus returns to the trigger upon closing.

2) Content Order & Headings (2 Minutes)

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

2. Ensure the focus order follows the visual order (no unexpected sidebar jumps).

3. Utilize your browser’s heading outline or skim visually: there should be one H1 and a logical hierarchy of H2/H3s.

Pass if: Keyboard order matches reading order and the structure is coherent.

3) Links & Buttons (2 Minutes)

1. Navigate 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 should also appear on focus.

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

4) Forms & Error Handling (4 Minutes)

1. Tab through each field; labels must be clear and associated.

2. Submit an empty form to generate error messages.

3. Errors should explain what to correct and focus should move to the first error or be easy to access.

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

Pass if: All fields are accessible, clearly labeled, and errors are specific and straightforward to fix.

5) Components: Modals, Tabs, Accordions, Carousels (3 Minutes)

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

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

3. Carousels: Should be pausable; operate with a keyboard; avoid rapid auto-advance.

Pass if: There are no focus traps, controls can be operated via keyboard, and state changes are clear.

6) Focus Visibility & Feedback (2 Minutes)

1. You should always see where you are—a clear, high-contrast focus outline.

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

Pass if: Focus is not hidden or obscured; messages are noticeable and informative.

Common Failures (and Quick Fixes)

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

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

• Focus Traps: For modals, ensure focus remains inside and returns to the trigger upon closing.

• Hover-only Patterns: Apply hover styles to :focus-visible as well.

• 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

• Include this test in your definition of done for new pages/components.

• Re-evaluate after design changes and script updates (navigation, modals, carousels).

• Pair manual checks with automated scans to catch simple code errors.

How Adjustable Can Help

Once structural issues are addressed, Adjustable empowers every visitor with control:

• Contrast and text-size settings increase readability and time on site.

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

• Simple setup, visible inclusivity—perfect for Marketing Managers and Website Owners seeking immediate results.

Try Adjustable

FAQs

Do I need to test every page?
Start with primary landing and conversion pages, then implement fixes across shared templates for site-wide improvements.

Is keyboard testing enough for compliance?
It’s vital but incomplete. Combine with screen reader assessments, contrast adjustments, and automated checks.

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

Next Steps

• Execute this test on your top 5 pages today.

• Resolve focus, labels, and modal behaviors you identify.

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

• Read next: CI/CD for Accessibility