Task 4.9: Conduct Accessibility Audit and Remediation

[rowantervelde]

Epic: #11 (Epic 4: Edge Cases, Performance & Testing)
Type: Task
Priority: P1 (High)
Estimate: 1 day

Description

Audit feature for WCAG 2.1 AA compliance and remediate issues to ensure accessibility for all users.

Acceptance Criteria

• Run axe DevTools audit, fix all violations
• Lighthouse Accessibility score ≥ 95
• Test with screen reader (NVDA/JAWS/VoiceOver)
• All interactive elements keyboard accessible
• Focus indicators visible on all controls
• Color contrast ≥ 4.5:1 for text
• Proper heading hierarchy (h1 → h2 → h3)
• ARIA labels on custom controls

Technical Notes

• Use @nuxtjs/a11y module for automated checks
• Test keyboard nav: Tab, Enter, Space, Arrow keys
• Screen reader testing:
  • MoodIndicator announces mood and percentage
  • ArticleCard announces title, source, sentiment score
  • Sort dropdown announces current selection
• Ensure error messages are announced to screen readers
• Consider skip-to-main-content link

Dependencies

• Blocks: None (end of Epic 4)
• Blocked by: All Epic 1-3 UI tasks

Test Coverage

• axe DevTools audit
• Manual screen reader testing
• Keyboard navigation test

Related Files

• All component files
• nuxt.config.ts (add a11y module)

---

Part of Feature 004: Sentiment Detail Breakdown Page