Contributor Project 1: Develop a Simple Accessible Game using SceneryStack

[brettfiedler]

This thread is to discuss a potential project for SceneryStack contributors. Please ask any questions or make suggestions for possible project implementation.

Project 1: Develop a Simple Accessible Game using SceneryStack

Project Size: 175 hours
Estimated Difficulty: Intermediate
Recommended Skills:

• JavaScript: Proficient in JavaScript for implementing interactive features and how it interacts with the DOM.
• TypeScript: Basic knowledge of TypeScript to work with existing codebases and enhance type safety.
• Git/GitHub: Skills to contribute code and communicate effectively within the development team.
• (helpful) Accessibility (a11y) Concepts: Familiarity with ARIA roles, keyboard navigation, and screen reader compatibility.

Description

SceneryStack supports the creation of accessible, flexible web interactives by providing keyboard access, screen reader compatibility, and other accessibility features. While these features are well integrated into PhET Interactive Simulations, there is a lack of practical examples demonstrating their use in interactive games.

This project aims to develop a fully accessible web-based game demo using SceneryStack, showcasing keyboard navigation, screen reader-compatible interactions, and customizable visual/audio features. The game will serve as a template and proof-of-concept for making browser-based games more inclusive.

Key Tasks

• Game Concept and Design: Select a game genre (e.g., board game, puzzle, card game, turn-based strategy). We recommend a simple game, but with sufficient complexity to demonstrate accessibility features, such as Chess.

• Develop an Interactive Game with Accessibility Features:

  • Use SceneryStack to create a working prototype with full accessibility support.
    • Implement keyboard navigation, including arrow-key and shortcut controls.
    • Support interactive screen reader descriptions (Interactive Description) via a Parallel DOM, ensuring proper navigation and feedback.
    • Incorporate Voicing features, enabling auditory game feedback.
    • Add color customization options to improve contrast for low-vision users.
    • Implement pan and zoom functionality for adjustable views.
  • Collaborate with Designers: Work with designers to create spoken descriptions that you will implement.

Expected Outcomes/Benefits/Deliverables

Fully Functional Accessible Game – A playable, if simple, web-based game with comprehensive a11y support, serving as a model for future projects.

Showcase of SceneryStack's Accessibility Features – Demonstrating how developers can integrate a11y-first principles into game development.

Improved Web Gaming Accessibility – Addressing the current lack of keyboard-accessible and screen reader-friendly online games.

Why This Project?

Many popular online games are not keyboard or screen reader accessible, making them unusable for many people with disabilities. For example, the most popular online Chess platforms do not offer keyboard navigation or screen reader support, or only offer the most mimimal support - not enough for a rich interactive experience.

This project will serve as an accessible alternative and prove that web games can be both engaging and inclusive from the start. Unlike most games that require users to find and activate accessibility settings, SceneryStack aims to provide clear accessibility features from the moment the page loads—removing barriers to entry for all players.