What if programming initiation was accessible to everyone? Our ambition is to make the SPY game as accessible as possible. There is still a lot to be done, but we are working on it...
Here is the list of accessibility features currently integrated into SPY that promote its accessibility:
SPY uses the web browser's speech synthesis to vocalize its content. To use the browser's speech synthesis, you must activate it using the "Text-to-speech" button located above the game canvas (remember to exit full-screen mode to access this button).
Once speech synthesis is activated, you can indicate whether you want the entire interface of the game to be vocalized or only the instructions. You can also control the speech rate of the speech synthesis.
Once speech synthesis is activated, navigate the game interface using keyboard navigation or mouse to have texts automatically read. If you have checked the "Instructions" box (default), only the introductory texts at the beginning of missions will be read. If you have checked the "Everything" box, any interface element (Menus, buttons, dropdown lists, etc.) will be read by speech synthesis.
For users using a screen reader with their own speech synthesis, it is not necessary to activate this option (see Screen Reader Details section).
To solve the various missions in the game, players use a block-based programming language. SPY offers five methods for manipulating these blocks and entering programs:
This interaction mode allows players to use the mouse pointer (or finger for touch devices) to drag blocks from the inventory into the programming areas. This method can also be used to change the order of blocks within a programming area to modify the program.
This alternative allows for a long click on a block to move it. Once the time threshold is passed, the block is automatically "grabbed." You can then move the selection pointer to move the block, so there is no need to keep the click held down. To drop the block, simply click again.
This option allows players to navigate the interface using the keyboard arrow keys to position themselves over the block to be moved. Once positioned over a programming block (whether in the inventory or already placed in a program area), press the "Enter" key to grab the block. Use the keyboard arrow keys to move the block within the interface, then press "Enter" again to release the block.
Unlike the previous three modes, here the player must first position themselves within a programming area at the spot where they wish to insert a new block. They then press the "i" key on the keyboard to "insert" a new block. The focus is automatically placed on the first available block in the inventory; the player can then browse the available blocks and confirm their choice with the "Enter" key. The selected block will be automatically added to the program at the spot where the "i" key was pressed.
This method also allows for changing the order of blocks in a program. The player must position themselves where they want to move a block, press "i", navigate to the block within the program they wish to move, and press "Enter". The selected block will be automatically moved to the spot where the "i" key was pressed.
Note that if the "i" key is pressed while on a block already integrated into a programming area, the new inserted block will be added just before the selected block.
Once a first block has been added to a programming area (regardless of the method used), you can double-click (or double-tap) on a block in the inventory to automatically add it after the last block added.
To delete a block, the player can drag a block from a programming area to the outside of it. Two alternatives to this method consist of right-clicking on the block to be deleted or selecting a block and pressing the Delete or Backspace key.
To access the game canvas, navigate through the page until you reach the "Application" or "Interactive Game Zone" object. Press "Enter" to enter the game. Once in the game, you can at any time press "Shift + Enter" to exit the game canvas and return to the web page context.
A bit technical: When a game object gets focus, its textual description is automatically sent to the "ScreenReaderSpan" HTML tag with the "status" role. This tag is defined with the aria-live="polite" and aria-atomic=true properties so that the screen reader can be immediately informed of changes to its content and make them accessible to the player via speech synthesis or a braille display (tested with a Brailliant Bi 40X and NVDA on Chrome and Firefox).
The game's objective is to move a robot in a maze, so it is necessary to be able to access a description of the game scene and follow its evolution during simulation. A textual description of the scene is permanently synchronized with the game state. To consult this description select "Menu" and "View text map" or use the "m" shortcut.