Improve Accessibility (a11y) Across the Application

[Suraj-kumar00]

Improve Accessibility (a11y) Across the Application

Description
The application needs accessibility improvements to ensure all users, including those using screen readers or keyboard navigation, can use the app effectively.

What Needs to Be Done

1. Keyboard Navigation

• Ensure all interactive elements are keyboard-focusable
• Add visible focus indicators (focus rings) on buttons, links, and form fields
• Flashcard flip should work with Enter/Space keys
• Study mode navigation should support arrow keys

2. Screen Reader Support

• Add aria-label attributes to icon-only buttons (theme toggle, mobile menu, etc.)
• Add aria-live regions for dynamic content (flash messages, loading states)
• Ensure flashcard content is announced on flip
• Add proper heading hierarchy (h1 → h2 → h3) on all pages

3. Color Contrast

• Verify WCAG AA contrast ratios for all text colors in both light and dark mode
• Check gradient text readability
• Ensure error/success states have sufficient contrast

4. Form Accessibility

• Associate all labels with inputs using htmlFor
• Add error messages connected via aria-describedby
• Indicate required fields with aria-required

Key Files to Review

• src/components/Navbar.tsx — Navigation accessibility
• src/components/study/StudyMode.tsx — Study interaction accessibility
• src/components/flashcards/FlashcardViewer.tsx — Card interaction accessibility
• src/components/Contact.tsx — Form accessibility
• src/app/page.tsx — Homepage heading hierarchy

Acceptance Criteria

• All pages navigable via keyboard only
• Visible focus indicators on interactive elements
• Proper aria-labels on icon buttons
• Form fields properly labeled
• Heading hierarchy correct on all pages
• Color contrast meets WCAG AA standards