Lake Devo: accessible online role-play
Greg Gay, Maureen Glynn, Naza Djafarova · 2016 · Proceedings of the 13th International Web for All Conference (W4A) · doi:10.1145/2899475.2899511
Summary
This extended abstract describes Lake Devo, a web-based role-playing environment developed at Ryerson University (now Toronto Metropolitan University) for collaborative learning, and the strategies used to make it accessible to blind students using screen readers. Lake Devo enables groups of students to collaboratively create and present role-play scenarios—used, for example, in a "Conflict Resolution and Dispute Negotiation" course to demonstrate communication and negotiation skills. The system is inherently visual, involving character creation with avatar customization, script writing with speech bubbles and character expressions, and movie playback. The accessibility work described represents a continuation of an action research methodology where the system is iteratively improved based on user feedback. The paper focuses on three key features and their WAI-ARIA implementations: the Character Editor, Script Editor, and Movie Player.
Key findings
The Character Editor uses WAI-ARIA tabpanels to organize image sprites (faces, hairstyles, clothing, accessories) into navigable categories. As options receive keyboard focus, JavaScript dynamically generates text labels based on sprite coordinates and associates them using aria-labelledby, allowing screen reader users to understand visual choices. Selected options are composited into a character display with a full text description automatically assembled from individual selections with appropriate parts of speech. The Script Editor uses aria-label to describe editor functionality, and employs ARIA live regions to announce a character countdown as text input approaches maximum length—counting down audibly for the last 25 characters. Script updates trigger ARIA alert roles to confirm success and position. The Movie Player uses aria-live regions so speech bubble text is automatically read as scenes progress, with adjustable playback speed to synchronize with screen reader reading rates. Users can also navigate manually or access a full text transcript. A key challenge was inconsistent WAI-ARIA support across screen readers—the team chose ChromeVox as their primary target due to its stronger ARIA support, noting that JAWS and NVDA had limited support for features like aria-relevant. Some "hacking" of ARIA was required, such as using aria-labelledby as a workaround where live regions would have been more semantically appropriate.
Relevance
This paper provides a practical case study in making highly visual, interactive web applications accessible through WAI-ARIA. The specific ARIA patterns described—dynamic label generation for visual options, live regions for real-time feedback, alert roles for action confirmation, and playback speed adjustment for screen reader synchronization—are transferable techniques for any developer building accessible interactive web applications. The honest discussion of cross-screen-reader compatibility challenges is particularly valuable, highlighting the real-world gap between ARIA specifications and assistive technology support that practitioners routinely face. A notable limitation is that no actual blind users had tested the system at the time of publication—the team planned user studies as a next step. The paper also illustrates the broader challenge of making collaborative, visually-rich educational tools inclusive without fundamentally changing the experience for sighted users.
Tags: WAI-ARIA · screen reader accessibility · e-learning accessibility · web accessibility · collaborative learning · role-play · visual impairment
Standards referenced: WAI-ARIA · WCAG 2.0