Track accessibility compliance (WCAG 2.2 AA)

[Sid-ah]

Goal

Audit and improve the gallery site to meet WCAG 2.2 AA accessibility standards.

Scope

• Pages: home, gallery, upload, admin, and shared components (hero, cards, grids, upload zone).
• Devices: desktop and mobile.
• Modes: light/dark, reduced motion.

Tasks

• Keyboard navigation: ensure all interactive elements are reachable in a logical order, visibly focused, and operable without a mouse (no focus traps).
• Semantics and landmarks: verify headings hierarchy, landmark roles (header, nav, main, footer, section, aside), and meaningful button/link usage.
• ARIA: add ARIA labels/roles only where native semantics are insufficient (e.g., icon-only buttons, modals), avoid redundant ARIA.
• Forms and inputs: ensure labels, descriptions, error messages, and required indicators are announced by screen readers.
• Media: provide alt text for images and accessible names for icons; ensure any motion/animation respects prefers-reduced-motion and does not block interaction.
• Color and contrast: meet WCAG AA contrast ratios for text, icons, and focus indicators; verify gradient overlays preserve readability.
• Components: validate modal behavior (trap focus, close on Esc, restore focus), dropdowns/menus, and toast/alert announcements.
• Responsive: preserve accessibility on mobile (touch targets, viewport zoom not blocked).
• Testing: run automated checks (axe DevTools or Lighthouse), capture violations, and document fixes.

Acceptance Criteria

• No critical/high issues in axe DevTools and Lighthouse accessibility audits on key pages (home, gallery, upload, admin) in light/dark themes.
• Keyboard-only users can complete primary flows (browsing gallery, liking/downloading, uploading) with visible focus states.
• All interactive icons have accessible names; all images have purposeful alt text (or alt="" when decorative).
• Modals respect focus management (focus trap, Esc to close, focus return on close).
• Color contrast meets WCAG 2.2 AA; focus indicators are clearly visible.
• prefers-reduced-motion honored for non-essential animations/transitions.

Notes

• Reference design system components to ensure consistent focus styles and semantics across cards, grids, and buttons.
• Consider adding an automated accessibility check to CI (e.g., Playwright + axe).