Skip to content

[P3][UX][planned] Fix accessibility: keyboard navigation, focus management, ARIA labels, landmarks #116

Description

@xodapi

Description
Audit revealed several accessibility gaps:

Findings

  1. Keyboard navigation: most games (SchulteGrid, StroopTest, NBackTest, etc.) rely entirely on mouse/touch clicks. No keyboard support for core gameplay.
  2. Focus management: AuthModal and FeedbackModal do not trap focus. Tab can reach elements behind modal. Focus not restored on close.
  3. ARIA labels: most icon-only buttons (mobile menu toggle, close, theme toggle) lack aria-label. Only 3 aria-labels exist in the whole codebase.
  4. Navigation landmarks: header nav uses with onClick navigators. Screen readers don't recognize these as navigation. Should be with /.
  5. Skip-to-content: no skip link for keyboard users to bypass header.

Acceptance Criteria

  1. Add keyboard event handlers to all game components (Tab + Enter/Space for primary actions)
  2. Implement focus trap in AuthModal and FeedbackModal with restore on close
  3. Add aria-label to all icon-only buttons
  4. Replace nav buttons with / elements with role=navigation
  5. Add skip-to-content link at top of App.tsx
  6. Verify with axe DevTools or similar a11y scanner

Severity: Medium

  • Modal focus escape is a WCAG failure
  • No a11y testing in CI currently

Metadata

Metadata

Assignees

No one assigned

    Labels

    area:uxUser experience, flows, copy, completion screensenhancementNew feature or requestpriority:P3Strategic horizon / later workstatus:plannedPlanned and not yet implemented

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions