Frontend: Improve Accessibility & Keyboard Navigation

## Description

Improve accessibility and keyboard navigation across the FairMind frontend application to ensure WCAG 2.1 AA compliance and better user experience for all users.

## Why This Is a Good First Issue

- High impact on user experience
- Clear guidelines (WCAG 2.1)
- Good learning opportunity for accessibility
- Can be done incrementally
- Well-documented standards

## Current State

- Basic accessibility exists
- Some keyboard navigation gaps
- Focus management needs improvement
- ARIA labels may be missing in some areas

## Goals

1. **Keyboard Navigation**
- All interactive elements accessible via keyboard
- Logical tab order
- Skip links for main content
- Keyboard shortcuts where appropriate

2. **Screen Reader Support**
- Proper ARIA labels
- Semantic HTML
- Alt text for images
- Form labels and error messages

3. **Focus Management**
- Visible focus indicators
- Focus trapping in modals
- Focus restoration after modal close

4. **WCAG 2.1 AA Compliance**
- Color contrast ratios
- Text alternatives
- Keyboard accessible
- Predictable navigation

## Getting Started

1. **Prerequisites**
- Understanding of HTML semantics
- Basic knowledge of ARIA attributes
- Familiarity with React/Next.js
- Accessibility testing tools (axe DevTools, WAVE)

2. **Files to Review**
- `apps/frontend-new/src/components/` - Component files
- `apps/frontend-new/src/app/` - Page files
- Focus on interactive components

3. **Implementation Steps**
- Audit current accessibility (use axe DevTools)
- Identify keyboard navigation gaps
- Add ARIA labels where needed
- Improve focus management
- Test with screen readers
- Verify WCAG compliance

4. **Testing**
- Use keyboard only navigation
- Test with screen readers (NVDA, JAWS, VoiceOver)
- Run accessibility audits
- Check color contrast

## Acceptance Criteria

- [ ] All interactive elements keyboard accessible
- [ ] Logical tab order throughout application
- [ ] ARIA labels on all interactive elements
- [ ] Focus indicators visible and clear
- [ ] WCAG 2.1 AA compliance verified
- [ ] Screen reader testing completed
- [ ] Documentation updated

## Resources

- [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)
- [ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/)
- [WebAIM Accessibility Checklist](https://webaim.org/standards/wcag/checklist)
- [axe DevTools](https://www.deque.com/axe/devtools/)

## Related

Related to parent issue #133 (Platform Enhancements & User Experience)

## Labels
enhancement, help wanted, good first issue, frontend, accessibility

Start by auditing the interactive components under apps/frontend-new/src/components/ and page files under apps/frontend-new/src/app/ with axe DevTools and keyboard-only navigation. Review the reported keyboard, ARIA, focus, semantic HTML, alt-text, form, and contrast gaps, then verify the acceptance criteria with screen readers and accessibility audits; done means WCAG 2.1 AA compliance is verified and documentation is updated.

由索引模型根據 Issue 內容生成。