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 game's various missions, players manipulate a block-based programming language. SPY offers three methods to manipulate these blocks and enter programs:
This interaction mode allows players to use the mouse pointer (or finger for touch devices) to drag blocks from the inventory into programming areas. It is also possible with this method to modify the order of blocks within a programming area to modify the program.
Once a first block is added to a programming area, you can use double-click (or double-tap) on inventory block to automatically add this block after the last added block.
To delete a block, the player can drag a block from a programming area outside of it. An alternative to this method is to right-click on the block to delete.
This option allows players to move through the interface using the keyboard arrow keys to position themselves on the block to move. Once positioned on a programming block (whether in inventory or already placed in a program zone), press the "Enter" key to grab the block. Use the keyboard arrow keys to move the block in the interface then press "Enter" again to release the block. If the block is released in a valid programming area it will be added to the program, otherwise it will be deleted.
Unlike the two previous modes, here the player must first position themselves in a programming area at the location where they want to insert a new block. They then press the "i" key on the keyboard to "insert" a new block. Automatically the focus is positioned on the first available block in the inventory, the player can then browse through the available blocks and validate their choice with the "Enter" key. The selected block will automatically be added to the program at the location where the "i" key was pressed.
This method also allows modifying the order of blocks in a program. The player must position themselves where they want to move a block, press "i", position themselves on the block to move in the program and press "Enter". The selected block will automatically be moved to the location where the "i" key was pressed.
Note that if the "i" key is pressed on a block already integrated into a programming area, the new inserted block will be added just before the selected block.
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; Press the "Home" key to automatically select the highest priority interactive element.
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="assertive" 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).
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 "DescMapSpan" HTML tag. To view the scene state at time t, exit the game canvas with "Shift + Enter", the focus should automatically be positioned on the "Continue navigation" element in the web page. The textual description of the map is just below. To return to the game, go back up until you find the "Interactive Game Zone" and press "Enter".