pacnpal/thrillwiki_django_no_react
1
1
Fork 0
mirror of https://github.com/pacnpal/thrillwiki_django_no_react.git synced 2025-12-24 07:31:09 -05:00
Code Issues Packages Projects Releases Wiki Activity
Files
edcd8f2076afd63aeb511478de4692c8659f91c5
thrillwiki_django_no_react/docs/accessibility/keyboard-navigation.md
pacnpal edcd8f2076 Add secret management guide, client-side performance monitoring, and search accessibility enhancements 
- Introduced a comprehensive Secret Management Guide detailing best practices, secret classification, development setup, production management, rotation procedures, and emergency protocols.
- Implemented a client-side performance monitoring script to track various metrics including page load performance, paint metrics, layout shifts, and memory usage.
- Enhanced search accessibility with keyboard navigation support for search results, ensuring compliance with WCAG standards and improving user experience.
2025-12-23 16:41:42 -05:00

3.9 KiB
Raw Blame History

Keyboard Navigation Guide

ThrillWiki is designed to be fully accessible via keyboard. This guide documents all keyboard shortcuts and navigation patterns.

Global Shortcuts

Key Action
Tab Move focus forward
Shift + Tab Move focus backward
Enter Activate focused element
Space Activate buttons/checkboxes
Escape Close modals/dropdowns

Navigation Menu

Key Action
Tab Focus menu button
Enter/Space Open menu
Arrow Down Next menu item
Arrow Up Previous menu item
Escape Close menu
Home First menu item
End Last menu item

Search

Key Action
Tab Focus search input
Type Start searching (debounced 300ms)
Arrow Down Navigate to next result
Arrow Up Navigate to previous result (or back to input)
Enter Select current result (navigate to link)
Escape Close results and blur input
Home Jump to first result
End Jump to last result

Modals

Key Action
Tab Next focusable element (trapped within modal)
Shift + Tab Previous focusable element (trapped within modal)
Escape Close modal
Home Jump to first focusable element
End Jump to last focusable element

Forms

Key Action
Tab Move to next field
Shift + Tab Move to previous field
Enter Submit form (when focused on submit button)
Space Toggle checkbox/radio button
Arrow Down/Up Navigate select options
Escape Close select dropdown

Dropdowns (User Menu, Browse Menu)

Key Action
Enter/Space Toggle dropdown open/closed
Escape Close dropdown
Arrow Down Navigate to next item
Arrow Up Navigate to previous item
Tab Move through items (or exit dropdown)

Mobile Menu

Key Action
Enter/Space Open mobile menu
Escape Close mobile menu
Tab Navigate through menu items

Theme Toggle

Key Action
Enter/Space Toggle between light and dark mode

Implementation Notes

Focus Management

  • All interactive elements must be reachable via keyboard
  • Focus order follows logical reading order (top to bottom, left to right)
  • Focus is trapped within modals when open
  • Focus returns to trigger element when modal/dropdown closes

Focus Indicators

  • All focusable elements have visible focus indicators
  • Focus ring: 2px solid primary color with 2px offset
  • Enhanced visibility in high contrast mode
  • Custom focus styles for complex components

ARIA Attributes

  • aria-expanded: Indicates dropdown/menu open state
  • aria-haspopup: Indicates element triggers a popup
  • aria-label: Provides accessible name for icon-only buttons
  • aria-modal: Indicates modal dialog
  • aria-controls: Links trigger to controlled element
  • aria-describedby: Links element to description
  • aria-live: Announces dynamic content changes

Skip Links

  • Skip to main content link available (hidden until focused)
  • Appears at top of page when Tab is pressed first

Testing Keyboard Navigation

Manual Testing Checklist

  1. Navigate entire site using only keyboard
  2. Verify all interactive elements are reachable with Tab
  3. Verify Enter/Space activates all buttons and links
  4. Verify Escape closes all modals and dropdowns
  5. Verify focus indicators are visible
  6. Verify focus order is logical
  7. Verify focus is trapped in modals
  8. Verify focus returns to trigger after closing modals

Automated Testing

Run accessibility tests:

python manage.py test backend.tests.accessibility

Browser Compatibility

Keyboard navigation is tested on:

  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Edge (latest)

Note: Some keyboard shortcuts may conflict with browser shortcuts. In those cases, browser shortcuts take precedence.

Reference in New Issue View Git Blame Copy Permalink