Teaching Accessibility Awareness with Games
Greg Gay · 2021 · Proceedings of the 18th International Web for All Conference (W4A) · doi:10.1145/3430263.3452438
Summary
This paper presents the Accessibility Maze, a web-based serious game developed at Ryerson University (now Toronto Metropolitan University) to teach web accessibility basics through experiential learning. The game was designed with three goals: provide a high-impact introduction to web accessibility for newcomers, create activities where people who do not normally encounter web barriers experience them firsthand (connecting emotion to learning for better recall), and build a challenging game that is fully playable with a screen reader. The game follows an Indiana Jones-style treasure hunter narrative where the player navigates through a maze, solving accessibility-related puzzles, collecting rewards and knowledge, with the ultimate goal of finding the Accessibility Master who provides a downloadable e-book covering 10 common web accessibility issues. The first version includes four levels covering: text alternatives for visual content, labels for form fields, alternatives for timed content, and keyboard accessibility. A key pedagogical principle is using emotion — each level is designed to elicit frustration when encountering a barrier, followed by an "aha" moment when the solution is discovered, mirroring the experience of screen reader users encountering inaccessible content in real life.
Key findings
The paper details specific accessible game design techniques that serve as a practical model for web-based game accessibility. These include: focused speech bubbles using aria-describedby for storyline narration; arrow key and Tab navigation mimicking page-flipping; keyboard-only maze levels that force sighted players to experience what screen reader users face; aria-labels on maze grid containers describing level layout and interactive objects; animation and music toggles to reduce distraction and interference with screen readers; earcons (audio cues) for different interaction types (gems, keys, locks, chests, puzzles); text feedback messages in aria-live enabled regions for screen reader users; navigation status announcements (with reduced verbosity, only every third or fourth movement); game play status messages in visible aria-live divs; diary dialog focus management ensuring screen readers begin reading when dialogs open and return focus when closed; and accessibility puzzles with hidden screen reader descriptions. Level 4 (keyboard operability) is highlighted as particularly effective — sighted players who have habituated to keyboard navigation over previous levels suddenly face partially disabled keyboard access, creating considerable frustration and a powerful realization about keyboard accessibility importance. Screen reader users receive equivalent keyboard shortcuts so they are not blocked.
Relevance
This work addresses a fundamental challenge in accessibility education: people who do not experience barriers firsthand often struggle to internalize why accessibility matters, leading to inconsistent application of learned principles. The Accessibility Maze offers a novel approach by using game mechanics and emotional engagement to create memorable learning experiences. The detailed accessible game design techniques documented in the paper — focus management, earcons, aria-live regions for game status, keyboard navigation patterns, animation toggles — provide a practical reference for anyone building accessible web-based interactive content beyond games. The approach of making the game itself fully accessible (playable with a screen reader) rather than just teaching about accessibility is particularly noteworthy, as it demonstrates that accessible game design is achievable with standard web technologies. The game could serve as a model for accessibility training programs in organizations, especially during remote work when experiential learning tools are needed.
Tags: education accessibility · game accessibility · web accessibility · screen readers · keyboard accessibility · ARIA · training
Standards referenced: WCAG · WAI-ARIA · Game Accessibility Guidelines