Weavly for Keyboard Users

Weavly has incorporated settings to support keyboard users. Keyboard accessibility can impact experiences of many different groups of users including those with motor disabilities, blind users, and individuals who choose to work with keyboards because of preference or efficiency.

Prior to using Weavly’s coding environment, consider the following features and tips to provide a more accessible coding experience for learners who use keyboards.

Navigation

Learners are able to fully navigate Weavly’s coding environment and operate its different functionalities by using a regular keyboard. Here is an overview of the keys they can use:

• Press “Tab” key to go to the next interactive item in the Weavly coding environment.
• Press “Shift” + “Tab” keys to go back to the previous interactive item in the Weavly coding environment.
• Press “Spacebar” or “Enter” to select an item.
• Use arrow keys to move between the options on a menu.
• Press the “Esc” key to exit any open menus.

Tab order

The following tab order is arranged for the Weavly coding environment to facilitate keyboard navigation:

1. Weavly Logo: This link will take learners back to the main Weavly website.
2. Accessibility Settings: This section includes options to adjust audio settings, colour themes, keyboard shortcuts, and robot connections.
3. Scene: This section displays the selected background and the on-screen character.
4. Scene Settings: includes options to choose a background for the scene, move the on-screen character to a specific starting position, and turn on/off the pen toggle
5. Action Panel: includes all the action blocks that learners need to build a program.
6. Program Panel: This panel provides a space to build a new program and make edits to the existing ones.
7. Play Controls: These controls include options to play a program, pause a program, stop a program, adjust the playback speed of a program, refresh the scene, and get a link of the programs to share with others.

Customizing the coding environment

Visual themes

Learners can press “Tab” to navigate to the accessibility settings and use the “Themes” option to apply their preferred visual theme across the coding environment. Available visual themes include:

• Default theme
• Dark theme
• Light theme
• Greyscale theme
• High Contract theme

Audio settings

Learners can press “Tab” to navigate to the accessibility settings and use the “Audio” option to select the type of audio announcements they would like to receive from the coding environment. This audio setting is different from the screen reader announcements.

Keyboard shortcuts

Learners can press “Tab” to navigate the accessibility settings and use the “keyboard shortcuts” option to turn the use of keyboard shortcuts on or off. On this menu, learners can choose the type of shortcuts suitable for their device. When the keyboard shortcuts are turned on, learners can press “?” on their keyboard to open and close this menu.

Here are a few basic keyboard shortcuts that learners can use:

• ? : Show/Hide the keyboard shortcut menu
• Ctrl+Alt+B : Add the selected command to the beginning of the program
• Ctrl+Alt+E : Add the selected command to the end of the program
• Ctrl+Alt+D : Delete the currently focused step
• Ctrl+Alt+I : Announce the character position and orientation
• Ctrl+Alt+P : Play or pause the program
• Ctrl+Alt+R : Refresh the scene
• Ctrl+Alt+S : Stop the program

An extended list of keyboard shortcuts is available. This extended list was created while keeping in mind those interested in building onscreen keyboard interfaces for the switch users rather than directly using the keyboard. Here is the list of all the available keyboard shortcuts for Weavly:

https://github.com/codelearncreate/c2lc-coding-environment/blob/main/docs/keyboard.md

Scene background and character position

Learners can press “Tab” to change the scene background in the scene settings section. Press “Enter” or “Spacebar” to open the world selector menu. Use the arrow keys to select the background you prefer for your scene. Press “Tab” to navigate to the “Save” button and select it by pressing “Enter” or “Spacebar”.

Learners can press “Tab” to navigate to the character positioning tools and press the "Spacebar"or “Enter” keys to move your character to your preferred starting position.

Building and editing a program

To be able to select and insert action blocks anywhere into your program, learners will need to have the toggle for ‘add nodes’ expanded. Otherwise, learners will only be able to add action blocks at the end of your program sequence.

Here are a few steps you can take to build a program in Weavly:

1. Press “Tab” to navigate to the action blocks.
2. Once you reach your preferred action block, press “Enter” or “Spacebar” to select it.
3. Then press “Tab” to navigate to the program panel.
4. Press “Tab” on the add node at the desired spot in the program for selected action block to be added.
5. Once you are there, press “Enter” or “Spacebar” to insert your selected action block to your program.
6. While your action is selected, you can still press “Enter” or “Spacebar” to insert the selected action block into multiple spots in your program.
7. If you need a different action block, use “Shift + Tab” keys to go back to the action block panel and select another action block.
8. Repeat the same process to add all the desired action blocks to your program.

To edit your program, follow the following steps:

1. Press “Tab” to navigate to your program panel.
2. Press “Tab” on the action block on your program that you want to edit.
3. Once you are on the action block, press “Enter” or “Spacebar” to open its control menu.
4. Press “Tab” to select any of the options on that menu including delete, replace, move to left, and/or move to right.
5. Press “Enter” or “Spacebar” to select any of those actions.
6. Once you are done you can press “Esc” to exit this menu, or press “Tab” on the action block and press “Enter” or “Spacebar” to close the control panel.