Inclusive Play — Play Without Barriers An accessible shape and color matching game featuring voice commands, screen reader support, and multiple input methods for users with disabilities.
🧠 Inspiration The idea was born during the opening moments of the hackathon. I met a participant who relied on voice commands to operate their computer due to limited mobility. Watching them struggle to navigate even basic interfaces was a powerful reminder that much of our digital world is unintentionally exclusive.
According to the World Health Organization, over 15% of the global population lives with some form of disability, yet fewer than 2% of games are built with accessibility in mind. This sparked a key question:
What if accessibility wasn’t an afterthought—but the foundation?
This was the turning point that inspired me to build Inclusive Play, where universal design drives every decision from the ground up.
🎮 What It Does Inclusive Play is a shape and color-matching game intentionally built for players of all abilities. The game allows users to play using:
Voice commands like “select red triangle”
Keyboard navigation for non-mouse users
Touch and gesture inputs for mobile users
Switch control compatibility for assistive devices
Screen reader support with meaningful ARIA updates
It also includes:
Multi-modal feedback (audio, visual, and vibration)
High contrast mode and scalable touch targets
Smart adaptive difficulty, adjusting in real time to each player’s performance
🛠️ How We Built It The project was developed over 48 hours using modern, accessible-first frontend technologies.
Built with React, TypeScript, and Vite for speed and modularity
Styled using Tailwind CSS and shadcn-ui for clean, accessible components
Used Web Speech API for cross-browser voice command support
Applied ARIA roles and semantic HTML to ensure screen reader compatibility
Ensured input flexibility by supporting voice, keyboard, touch, and switches all through a unified state management system
We also followed WCAG guidelines closely from the start, not as a checklist, but as a design philosophy.
⚔️ Challenges We Ran Into Voice Recognition Across Accents Early testing showed that the voice commands only worked reliably for certain English accents. To make it inclusive, I added fuzzy matching and accepted natural variations in speech so users could say “choose,” “click,” or “pick” and still be understood.
Mobile Touch Accuracy Buttons that looked fine on desktop were too small on mobile screens. I had to rethink the layout and scale touch targets dynamically based on screen size. I used a formula to set the minimum touch area:
Touch Target Size = max(44px, 15% × √(screen area))
Input Lag Handling multiple input methods simultaneously—voice, touch, keyboard—started to create performance issues. I optimized input listeners with careful cleanup and delegated handlers, keeping all interaction delays under 100ms.
Screen Reader Compatibility Some screen readers couldn’t understand the dynamic game state. I solved this by using ARIA live regions and atomic updates that clearly announced the current target and options without overwhelming users.
🏆 Accomplishments We’re Proud Of Zero WCAG 2.1 Violations: The game passed automated accessibility audits
100% Keyboard and Switch Support: No mouse required
Voice Recognition Accuracy Over 95%: Even with diverse accents
Playable via Screen Reader: Confirmed compatibility with NVDA
Smooth Mobile Experience: Optimized for screens as small as 320px
Progressive Enhancement: The core game works even without JavaScript
📚 What We Learned Designing for edge cases helps everyone. Voice input became popular even among users without disabilities—especially when multitasking.
Cognitive load theory matters. Simplifying choices and instructions reduces fatigue, especially for users with cognitive impairments.
Accessible design improves overall UX. Features like high-contrast mode and keyboard shortcuts enhanced the experience for all players.
Real feedback > assumptions. Testing with real users using screen readers and assistive devices was far more valuable than any simulation.
🚀 What’s Next for Inclusive Play Open-Source Toolkit: Convert the core mechanics into reusable components for other developers building accessible games
AI-Powered Personalization: Adjust game difficulty and interface based on behavior and success patterns
Multiplayer Mode: Let users of all abilities play together in real-time
Education & Advocacy: Integrate Inclusive Play into school curriculums to teach kids about inclusive design and empathy
🌍 The Bigger Picture Inclusive Play isn't just a game—it's a proof of concept.
It shows that building with accessibility at the core results in better, more enjoyable experiences for everyone. We’re not just helping a small group—we’re enhancing usability across the board.
This hackathon reminded me of a powerful truth:
When we design for the edges, we create better experiences for the center.
Log in or sign up for Devpost to join the conversation.