istovaidarmerda
At the height of the pandemic lockdown, an online conference focused on the not-so-good stuff that was happening amongst several areas of society. And I build it's website.
Accessibility Considerations
Despite being a fun, playful website with easter eggs, accessibility was not compromised. The site was built with:
- Semantic HTML structure throughout
- Proper heading hierarchy
- Keyboard navigation support for all interactive elements
- Screen reader compatibility - easter eggs were implemented in a way that doesn’t interfere with assistive technologies
- High contrast text and background colors for readability
- Accessible forms and navigation
The easter eggs (fart sounds) were implemented in a way that doesn’t break the user experience for those using assistive technologies. The site maintains WCAG 2.1 AA compliance while still delivering an engaging, fun experience.
Technical Approach
Built with:
- Next.js - For server-side rendering and static site generation
- Styled Components - For component-scoped styling
- Cypress - For end-to-end testing
- Jest and Testing Library - For unit and component testing
The project was developed over a weekend with Henrique Macedo handling the visual design and branding, while I focused on implementation and testing. The site needed to balance serious content with playful visuals, which required careful attention to both functionality and accessibility.
Process
The project was a quick turnaround - developed over a weekend. Henrique handled the visual design while I implemented the Next.js site and ensured all interactions were accessible.
Testing was done with Cypress for end-to-end flows and Jest/Testing Library for component testing. Accessibility was validated using automated tools and manual keyboard navigation testing.
The easter eggs were added as a fun way to spread word about the site, but implemented in a way that doesn’t interfere with accessibility.
Results & Impact
The conference was a success with many attendees and positive feedback. The website successfully balanced serious content with engaging visuals and interactive elements.
The project demonstrates that accessibility and fun can coexist - the easter eggs don’t compromise the site’s usability for users with disabilities.