Optimize for Accessibility & Mobile Responsiveness (Event Page)

[ihlonne]

As a user, I want an event page that is easy to read and navigate on any device, so I can access it anytime.

✅ Can Start Now – Independent Tasks Base Responsive Setup

• [x] Set up global layout constraints (e.g., max-w-screen-lg, p-4, gap-4)
• [x] Define Tailwind spacing and text scaling guidelines (text-base, lg:text-lg)
• [x] Add a mobile-first layout approach using sm:, md:, lg: breakpoints
• [x] Set up consistent heading spacing and padding conventions

Base Accessibility Utilities

• [ ] Document or set conventions for using:

• aria-label

• role

• alt text for images

• sr-only and focus:outline

Accessibility Testing Tools

• [x] Test any existing components using browser extensions (e.g., Axe, Lighthouse)
• [x] Prepare audit notes for color contrast, keyboard nav, and semantics

🕓 Wait For Component Handover – To Be Done Later

• [x] Review and improve keyboard accessibility and semantics in the NavBar (from Hilde)

Full Page Responsiveness

• [x] Final pass on overall layout across devices

  Coordination Plan

• [x] Sync with Hilde when navigation is live

• [x] Perform a final developer check for accessibility and responsiveness across the full page once all components are assembled

   → Test layout scaling, focus states, alt text, and semantic HTML    → Leave a note for QA (Nik) if anything needs extra testing or follow-up

[sanakhuram]

Accessibility Audit – /event Page Tools Used: • Lighthouse • Axe DevTools • Manual Keyboard Navigation Test Date: June 3, 2025 Findings • Passed all critical accessibility best practices, including semantic HTML, correct form labeling, and sufficient contrast in most areas. • Minor color contrast issues identified in the footer (flagged by Axe). • Keyboard navigation is functional and logically ordered.

Lighthouse Scores (Dev Mode): o Accessibility: 89 o Best Practices: 100 o SEO: 83 o Performance: 54 (performance score is lower due to running in development mode) • It is recommended to generate a final Lighthouse report using the production build via vite build && vite preview for accurate performance metrics.

[sanakhuram]

Base Accessibility Utilities The image includes proper alt text, but aria-label and role attributes are not applicable at this stage

[Niksubishi]

Completed, approved and merged. Feedback via team Discord.