United Healthcare partnered with Pixelfarm to build out an interactive game center for their users. They needed the games to meet or exceed the guidelines set forth by the Web Content Accessibility Guidelines(WCAG) so that they could adhere to the American's with Disabilities Act.
So I built out some amazing, accessible, and responsive web games. How cool is that?
Game Center #
The hub of all the games needed to showcase everything that United Healthcare could offer. All of the games were reviewed and were tagged with appropriate considerations. Some games has special considerations for screen reader support, keyboard-only play, difficulty selection, and vertical only support. This allowed folks who might have cognitive, visual, and motor impairments to better control how they would like to play.
In total we had six games: Memory Recall, Word Scramble, Shuffle Club (a Breakout clone), a Jigsaw Puzzle, Party Pop (a simple match game), and Trivia Casino!
Memory Recall #
Building a memory recall game to meet WCAG is a tricky proposition because most screen readers allow you to replay the content that is read to you.
The first iteration was using an aria-live region and having the cards announce their numbers on animation. Unfortunately after some play testing with users we discovered that most of them would replay the sequence and quickly type it in.
So we purposely decided to degrade the experience so that they had the same game experience as folks who weren't using assistive technology. We did this by creating custom audio cues! Fun!
Trivia Casino #
Building a fully accessible trivia game is a tad bit easier. We were still using custom audio cues for aesthetic reasons but the main accessibility challenge here was that the original version was timed.
A timed game makes it challenging for folks who might have cognitive disabilities to play the game to their full enjoyment. After some conversations it was decided that while a "timed" version might be more challenging, it didn't actually add anything to the game.
Technical Considerations #
Each game allowed their players to collect "coins" that they could then use to unlock special skins, new games, and other fun goodies.
To manage this centrally we leveraged Firebase to store the players custom ID and the progress they made and each game was hosted in a custom build React wrapper that managed state and personalization across the multiple applications.