UncleGoose: Accessible Blocks-Based Programming

The code of a computer program isn't like an essay. Instead, code is a hierarchical tree-shaped structure, like an outline or a sentence diagram. A particular part of a program is therefore best identified by its relation to other parts (e.g., “this expression is inside a function definition”), rather than by line or column numbers. And yet, most programmers write code the same way they would write an essay: editing lines and columns of text.

It is a challenge for programmers to “see” the tree behind the text, and modern editors use visual aids to help bridge the gap. Features like syntax highlighting, bracket matching, and auto-indenting provide sighted users with cues about the underlying tree. Without those cues, programmers would have to construct the tree simply by reading pages and pages of raw syntax, which is incredibly difficult even for skilled programmers. Perhaps this is why these features are considered required in a modern editor! Unfortunately, none of these visual cues are useful for screen reader–using programmers. They are left with only the raw syntax, read aloud by a screen reader or piped through a braille display. Faced with a UI that sighted programmers would consider unusable, screen reader users are at a steep disadvantage from their sighted counterparts. Indeed, research has repeatedly shown that users who are blind or have vision impairment struggle with program comprehension and orienting within code relative to their sighted peers.

PAC wanted to help bridge this gap, and we were delighted to work with Bootstrap on the accessibility of CodeMirror-Blocks (CMB), which addresses this problem in two ways:

• CMB allows users to navigate and edit the tree itself, rather than lines and columns of textual syntax. Prior work had shown that navigating the tree results in significant gains in comprehension and orientation for screen reader users, and our user testing of CMB replicated this effect. We believe that being able to edit the tree as well will amplify this effect.
• CMB allows code to be described in natural language, rather than simply being read aloud as syntax. For example, the code, “function f(x) { return x + 2; }” could be read aloud as “f, a function definition with one input: x.” When the user navigates inside the definition, the body could be read as “return an addition expression, of x and 2.” While the specific wording can be easily changed for the audience (using child-friendly terminology, or even using non-English descriptions!), the key inside here is the ability to have code described instead of having the syntax parroted.

CMB is designed to be language-agnostic, allowing anyone to write a parser for the language of their choice. It is implemented as a wrapper to the popular CodeMirror JavaScript library, allowing any IDE using CodeMirror to get the accessibility benefits of CMB with minimal changes to their codebase. CMB is already in use by Bootstrap, one of the largest providers of in-school computer science. Thanks to CMB, schools that use Bootstrap are able to include students with vision impairment in the classroom, working side-by-side with sighted peers thanks to a tool that works for both.

This work is a collaboration between Bootstrap and Prime Access Consulting, and would not be possible without the support of the National Science Foundation, the Entertainment Software Alliance, Vint Cerf. We are especially grateful to AccessComputing, for all of their guidance, support, and community outreach. To learn more, check out our paper on this work.