Accessible Blockly: Making a Visual Coding Environment Accessible
By Cory Diers, Kevin Chao, and Yi-Yi Kung
Blockly is a library for creating visual programming editors.听 It鈥檚 easy to use because a student doesn鈥檛 have to know syntax in order to program, and Scratch and Code.org are promoting it. We want to make Blockly Games accessible to blind students. A lot of kid-facing user experience (UX) relies on visual metaphors to restructure forms of knowledge. How might we make a highly visual UX design, like the one in Blockly, accessible to those who are visually impaired?
This presents a variety of design challenges:
- We chose to develop a separate accessible web version because of the following:
- Blockly uses lots of java script; it鈥檚 not your usual mostly-HTML webpage.
- The heavily-visual puzzle-block user interface (UI) doesn鈥檛 necessarily translate well to blind users.
- Existing games don鈥檛 really make sense non-visually.
Accessible Blockly can be used to make a music game. It utilizes HTML to translate Blockly鈥檚 stacks of blocks into a nested table view that can be easily walked by a screen reader. We found a challenge was getting used to the UI and how to do simple operations. So, we built some tutorial levels to introduce users to the basics of manipulating blocks, and a main game with levels that build on each other to produce the entire tune to Frere Jacques. Along the way, they learn sequential execution and for loops.
Still, there are multiple UI challenges, including the following:
- Moving blocks from toolbox to workspace
- Instructions need to be clear but non-verbose
- In the workspace, one island or multiple islands?
- Orientation: how do students know 鈥渨here they are鈥?
We did some UX research with students from the California School for the Blind. We found that kids weren鈥檛 as familiar with using screen readers than we expected them to be. The auditory music component of the game was very useful for kids who used the auditory feedback to hear if they had correctly written their program. Kids struggled with navigating the tree structure of the interface. Kids had trouble understanding the relationship between the components of the interface, particularly the toolbox-workspace relationship.
We took this feedback into account, and iterated on the design. Out next iteration will introduce screen reader functionality before jumping into Blockly proper. We suspect this will make it easier to jump into navigating 鈥渇ull鈥 Blockly. We also had problems with the three-column design, and opted for a two-column design, where the 鈥渢oolbox鈥 is now its own dialog under the menu. Navigation is easier in this system, since it鈥檚 harder to accidentally find yourself switching from workspace to toolbox and back. We also decided to replace the 鈥渃opy-paste鈥 metaphor with linking. 鈥淢arking a spot鈥 and placing a block there proved to be a more intuitive UI for our users in our second test.
Blocks4All: Making block languages accessible using a touchscreen
By Lauren Milne
Block programming environments such as Scratch and Blockly, are popular educational tools to teach children how to program, as they allow children to avoid learning syntax and focus instead on logic and common programming concepts. However, current block programming environments rely heavily on visual aspects: the blocks are pieces of code that act like puzzle pieces that fit together only if the code is syntactically correct. These visual aspects are inaccessible to blind children, so these children are being left behind their peers in access to computer science education. We are exploring to make these types of programs accessible to blind children using a touchscreen tablet and have developed a prototype.
Tangibles + Audio stories = Programming + Fun
By Varsha Koushik
Visual block programming languages like Scratch, Blockly, and Snap are a popular way of introducing kids to programming. However, a visual programming environment with graphical presentations for blocks, program creation, and program execution is inaccessible to visually impaired users.
Can programming become more accessible to visually impaired users?
Non-visual programming research has gained momentum in the recent past. Quorum [1] is an evidence-based programming language that is used by both sighted and non-sighted users. BraillePlay [2] explores the use of touch screens for block languages. Pseudo Blocks [3] is a pseudo spatial blocks language that uses keyboard navigation and synthetic speech to create programs. Screen-based approaches require proficient screen reader knowledge and majority of visually impaired kids are novice users. Block shapes still remain a constraint for visually-impaired users to learn block languages.
Can tangibles indicate shapes more intuitively?
Osmo system [4], Project Bloks [5], and Project Torino [6] use iPad, pucks, and baseboards to create programs and electronic components. Of these approaches, Project Torino explores sighted and non-sighted user collabo