At Code.org, we believe every student should be able to code regardless of how they interact with a computer. Blockly, the block-based editor that powers many of our labs, ships with keyboard navigation and screen reader support built in, and both are turned on by default for every student and teacher account. There's no setting to find or toggle; if you normally use a mouse or trackpad, you can switch to the keyboard at any point in a project without losing your place.
This page walks through how to move around a workspace with the keyboard, lists the available shortcuts, and explains what a screen reader announces as you work.
Getting Started
To begin navigating with the keyboard, click anywhere on the workspace or press Tab until focus lands there. From that point, the arrow keys move a cursor around your code the same way arrow keys move a cursor through a line of text, letting you read an existing program block by block. Up and down move between lines of code, and left and right move into fields in the focused block. Press Enter to edit a field or confirm a selection, and press Esc to back out. At any point, pressing the forward slash key (/) brings up the complete list of shortcuts, so you don't have to keep everything memorized.
Keyboard Shortcuts
These keyboard shortcuts are for Windows; for Mac, use Command instead of Ctrl.
General
| Action | Shortcut |
|---|---|
| Menu | Ctrl + Enter |
| Edit or confirm | Enter / Space |
| Exit | Esc |
| Toolbox | T |
| Clean up workspace | C |
| List shortcuts | / |
Editing
| Action | Shortcut |
|---|---|
| Delete | Delete / Backspace |
| Disconnect | X |
| Move block | M |
| Cut | Ctrl + X |
| Copy | Ctrl + C |
| Paste | Ctrl + V |
| Duplicate | D |
| Undo | Ctrl + Z |
| Redo | Ctrl + Shift + Z |
Code Navigation
| Action | Shortcut |
|---|---|
| Up | Up arrow |
| Down | Down arrow |
| Right | Right arrow |
| Left | Left arrow |
| Next stack | N |
| Previous stack | B |
| Move to workspace | W |
Screen Reader Support
As you move the cursor with the arrow keys, Blockly builds a description of whatever block, field, or connection you land on and passes it to your screen reader, so you hear the same information a sighted student would see on screen. This works with major screen readers, including NVDA, JAWS, and VoiceOver, and refreshable braille displays.
This applies across our block-based labs, including Music Lab, Dance Party, Sprite Lab, and the other Blockly-powered tools in our curriculum. Wherever you see Blockly's drag-and-drop block editor, keyboard navigation and screen reader support are already there.
Note: App Lab and Game Lab are Droplet-based Javascript labs that do not use Blockly.
Frequently Asked Questions
Do I need to turn this on? No. Keyboard navigation and screen reader support are on by default for every user, so there's nothing to enable in settings.
Which labs does this work in? Any lab built on our block-based editor, including Music Lab, Dance Party, and Sprite Lab. If you're using a text-based tool like Python Lab or Web Lab, this page doesn't apply, since those editors aren't built on Blockly.
Can I switch between the mouse and keyboard mid-project? Yes. You can move back and forth at any point without losing your cursor position or your work.
What if I don't use a screen reader? Nothing changes for you. Screen reader announcements only fire when assistive technology is active, so mouse and keyboard users without a screen reader won't notice a difference.
If you have any questions, concerns, or feedback, please reach out to accessibility@code.org.