Blocks4All: Five Keys for Accessible Block-Based Languages

Lauren R. Milne, Macalester College
Richard E. Ladner, University of Washington

 

An example of a block with an icon of an elephant.

Accessible Elements

Each block is fully described (title, description, location) by VoiceOver, the screen reader for iOS. Additionally, blocks are placed at the bottom of the screen so they can be found without vision.

 

 

Screenshot of blocks being moved around.

Moving Blocks

Instead of drag and drop, each block is moved using select, select drop. You select the block you want to move, and then select the location you want to move it to. This two-phase interaction is much easier to perform with VoiceOver.

 

 

Screenshot of nested blocks showing structure.

Conveying Program Structure

Blocks are a uniform size and nested blocks are stacked. Structure is also conveyed via audio cues (the blocks underneath tell you if you are inside a loop or conditional).

 

 

Screenshot of a block being selected and an audio clip plays.

Conveying Type Information

We used audio clips to communicate information about types (e.g. Booleans and condition statements make a beep-beep noise when selected to indicate they fit together).

 

 

Dash robot icon.

Accessible Output

We designed the app to control a Dash robot from Wonder Workshop, which can move and make noise.

 

Download Blocks4All.