Accessible Battleship

• 

• 

  Gameplay

\section*{About the Project: Accessible Battleship}

\textbf{Accessible Battleship} is a fully inclusive browser-based version of the classic Battleship game, designed so that blind and sighted players can compete on absolutely equal terms. The core innovation is its seamless integration with \textbf{VoiceOver} and real-time \textbf{Braille display output}, making it the first Battleship experience that can be played entirely through touch using a device like \textbf{PocketDot}.

\subsection*{Inspiration}

This project began with a simple question: \emph{Why can sighted players enjoy casual mobile games anywhere, but blind players cannot?}
As a creator working deeply in accessibility and tactile interfaces, I saw that even simple strategy games were often visually locked. Battleship, although conceptually simple, is nearly impossible to play without sight. The DEIJ Hackathon challenged us to build for equity and justice, so we reimagined the game from the ground up: accessible-first, tactile-first, and playable by everyone.

\subsection*{How We Built It}

The prototype was developed on \texttt{playscape.gg}, combining its visual logic engine with custom accessibility layers.
We implemented: \begin{itemize} \item semantic HTML structure so VoiceOver can navigate the game grid, \item descriptive audio feedback for all game states (hit, miss, sunk), \item a Braille-mapped grid where each cell corresponds to a tactile state on PocketDot, \item a turn-based input system that works with Braille keyboard commands, \item an iPhone-optimized interface where blind players can feel the entire battlefield. \end{itemize}

Rather than adding accessibility at the end, we treated it as the \emph{primary game mechanic}—every design choice began with the needs of blind players.

\subsection*{What We Learned}

Building Accessible Battleship taught us that inclusive game design requires rethinking traditional assumptions: \begin{itemize} \item visual animations must be replaced with concise audio cues, \item grid memory becomes a tactile problem instead of a visual one, \item VoiceOver focus must remain stable even as the game state changes, \item audio feedback must avoid overload while still conveying spatial information. \end{itemize}

We also learned that translating a digital (10 \times 10) grid into a tactile Braille surface is both a design and engineering challenge. But once solved, it created a uniquely immersive experience for blind players.

\subsection*{Challenges}

Key challenges included: \begin{itemize} \item syncing the Battleship grid to PocketDot’s Braille cells in real time, \item ensuring VoiceOver did not interrupt or override game updates, \item mapping non-visual strategies into a tactile-first UX, \item pushing the limits of playscape.gg to support deep accessibility behaviors. \end{itemize}

Each challenge required iterative testing with screen readers and tactile displays, refining the interface until it was fully navigable without sight.

\subsection*{Why It Matters}

Accessible Battleship is more than a game—it is a demonstration that everyday browser games can be inclusive without separate versions or reduced functionality.
For the first time, blind players using PocketDot can \emph{feel} the gameplay, experience strategy tactually, and play alongside sighted friends with full parity.

This is inclusion in practice: shared play, shared rules, shared joy.
A small game, but a meaningful step toward digital equity.

Built With

• chatgpt
• lovable
• nanobanana
• playscape.gg