Improve accessibility for screen readers and keyboard navigation

[Echo2f13]

Description

Ensure NeuroForge is usable by everyone, including users with visual, motor, or cognitive disabilities.

Requirements

WCAG 2.1 AA Compliance

• Sufficient color contrast ratios (4.5:1 for text)
• Text resizable up to 200% without loss of functionality
• No content that flashes more than 3 times per second

Keyboard Navigation

• All interactive elements reachable via Tab
• Logical focus order
• Visible focus indicators
• Skip links to main content
• Escape key closes modals

Screen Reader Support

• Proper heading hierarchy (h1 → h2 → h3)
• ARIA labels for icons and buttons
• Live regions for dynamic content updates
• Alt text for all images
• Form labels associated with inputs

Visual Accessibility

• High contrast mode toggle
• Dark/light theme respects system preference
• Dyslexia-friendly font option (OpenDyslexic)
• Adjustable text size in settings

Motor Accessibility

• Large click targets (44x44px minimum)
• No time-limited interactions (or adjustable)
• Reduced motion option

Testing Plan

• Manual testing with VoiceOver (macOS)
• Manual testing with NVDA (Windows)
• axe DevTools automated audit
• Keyboard-only navigation testing
• Color contrast checker

Implementation

Components to Update

• Navigation menu
• Quiz interface (answer selection)
• Flashcard flip interaction
• Chat input and messages
• Document upload area
• Modal dialogs
• Progress indicators

New Settings

• High contrast mode toggle
• Dyslexia font toggle
• Reduced motion toggle
• Text size adjustment

Acceptance Criteria

• All interactive elements keyboard accessible
• Proper ARIA labels and roles throughout
• Color contrast ratios meet WCAG AA
• Screen reader announces dynamic updates
• High contrast mode works correctly
• Dyslexia font option available
• No accessibility errors in axe audit

Priority

Medium

Resources

• WCAG 2.1 Guidelines
• MDN Accessibility Guide