Keyboard Navigation Guide

Overview

This document outlines the keyboard navigation testing procedures for the Understated theme. All interactive elements should be accessible via keyboard, following a logical tab order.

Testing Procedures

Skip Link

1. Load any page
2. Press Tab once
3. Verify:
   • Skip link becomes visible
   • Focus styles are applied
   • Activating it (Enter) moves focus to main content
   • Visual appearance matches theme

Main Navigation

1. Tab through navigation items
2. Verify:
   • Focus moves in logical order (logo → nav items)
   • Focus styles are visible and consistent
   • Current page is indicated (aria-current)
   • All items can be activated with Enter

Interactive Components

1. Test all interactive elements:
   • Buttons
   • Links
   • Form inputs
   • Theme toggle
2. Verify:
   • Focus styles are consistent
   • Enter/Space activates buttons
   • No keyboard traps
   • Focus visible at all times

Form Inputs

1. Navigate through form fields
2. Verify:
   • Tab moves between fields logically
   • Error messages are announced
   • Submit button is keyboard accessible
   • Success/error states maintain focus

Navigation

1. Press Tab to move through interactive elements
2. Press Shift+Tab to move backwards
3. Press Enter/Space to activate buttons and links

Testing Checklist

• All interactive elements are focusable
• Focus order follows logical flow
• Focus styles are visible and consistent
• Skip links work correctly
• No keyboard traps exist

Common Issues to Check

• Focus should never be lost
• Skip link should be first focusable element
• Focus styles should be visible and consistent
• Interactive elements should work with Enter/Space
• Modals should trap focus correctly
• Focus should return to trigger after modal closes

Accessibility Tools

• Use keyboard only (no mouse)
• Test with screen readers
• Verify ARIA attributes
• Check focus visibility in high contrast mode