Optimize for Accessibility & Mobile Responsiveness (News & Events 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

• [x] 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, Wave)
• [x] Prepare audit notes for color contrast, keyboard nav, and semantics

🕓 Wait For Component Handover – To Be Done Later Image Accessibility

• [x] Check for alt text once event images are in place

Navigation Accessibility

• [x] Review and improve keyboard accessibility and semantics in the Cards

Event Card Testing

• [x] Test responsiveness and accessibility of the EventCard component (from Rikke)
• [x] Ensure tag contrast, button focus, and content scaling work across breakpoints

Full Page Responsiveness

• [x] Final pass on overall layout across devices

  Coordination Plan

• [x] Sync with Rikke after EventCard structure is implemented

• [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 & Lighthouse Summary

Component Tested: "Upcoming Events" section Date: June 4, 2025

Findings

Color Contrast

• All text and tags in the EventCard section meet WCAG 2.1 AA contrast requirements.
• Footer text (out of scope) flagged for insufficient contrast.

Keyboard Navigation

• All interactive elements (cards, links, SVG buttons) are accessible via keyboard.
• Tab order is logical and consistent.

Semantic HTML & ARIA

• Semantic elements are appropriate.
• Decorative icons are wrapped in links with appropriate aria-label and aria-hidden="true" attributes.

Manual Testing Summary

• Keyboard navigation is functional and predictable.
• No keyboard traps were found.
• Focus indicators are present but could be enhanced on mobile devices using focus-visible styling.
• Recommended Improvements (for future sprints)
• Adjust footer text contrast to meet WCAG standards.

The Lighthouse audit for the /event page returned the following scores:

• Performance: 53
• Accessibility: 91
• Best Practices: 100
• SEO: 83

These scores reflect the overall state of the full page. Please note that the current task was limited to the "Upcoming Events" section, focusing on layout responsiveness and basic accessibility improvements. Broader performance and SEO-related issues fall outside the scope of this work.

[Niksubishi]

Completed, approved and merged. Feedback via Team Discord.