P5 Access Project Logo.png

UX Research I

 
p5access01.png
 

The P5 Accessibility project is a community-based attempt to make P5.js and its learning resources accessible to people that are blind or have low-vision. The Processing Foundation has supported the work, which relies on a broad network of both sighted and blind experts and end-users. The project was born out of a participatory design collaboration between myself and Chancey Fleet, a blind technology expert and educator who works at a New York Public Library. Together, we worked to develop a diagramming tool (fig. 1) that would allow her to plan a banquet, and save and share her plans digitally.

figure 1. Original Diagramming Tool

If the prototyping process was to be truly participatory, Chancey needed to brush up on javascript and HTML. We looked into the plethora of code-learning resources online and found that most were inaccessible to her screen reader. Even the “good” ones, the ones that teams of very smart people had worked hard to make accessible, remained unfriendly and cumbersome to use because although their lesson descriptions were accessible their videos, edit fields, or screenshots of code snippets were not.

Our solution was to combine the design challenges into one mega project. We approached the Processing Foundation, and they accepted our application to their 2016 fellowship program. The Processing Foundation’s mission — to “promote software literacy” and “empower people of all interests and backgrounds to learn how to program and make creative work with code” — aligned nicely with the project goals.

We began the project with input from experts and focus groups that have facilitated a redesign of the P5.js learning resources and web-based code editor to ensure that they are accessible to people with low vision and blindness.

Expert Interviews:

I interviewed five professional HCI (Human Computer Interaction) researchers and developers with special interest in accessibility for people with visual impairments. Each of these stakeholders have visual impairments themselves, and offered great insights into the issues of this type of undertaking and examples of previous attempts.

Workshops/User-Testing/Focus Groups:

I coordinated and facilitated six workshops in which people with visual impairments came and learned web development and also tested our P5.js web-editor prototypes as they have developed with feedback. We also have held five focus groups in which we asked participants what kinds of projects they would use p5 for, and what format of output they would like to receive the visual and spatial information in.

Figure 2. Claire stands behind three workshop participants sitting at a table with laptops in front of them.

Figure 2. Claire stands behind three workshop participants sitting at a table with laptops in front of them.

Implementation:

The outputs of P5 sketches have been a particular challenge to convey in an accessible format. As canvas elements are impenetrable by screen readers (the only HTML5 element that is), we worked on creating a “Shadow DOM” that dynamically interprets the visual and spatial outputs on screen. Our Shadow DOM outputs are hidden but accessible to screen readers.

With the insights from end-users we have developed the following outputs: 1) accessible text (english language description), 2) tabular (in a table format), or 3) tonally based (panning and frequency used to convey position and speed) descriptions of the visual content on the canvas. In their current state, the accessible outputs handle fairly simple sketches and can be activated in P5’s web-based IDE’s Preferences menu (fig. 3). I have also developed a number of tactile tools (fig. 4) to assist in teaching spatial ideas, a color namer and high contrast theme for the editor (fig. 5).

Figure 3. Animated gif of outputs

Figure 3. Animated gif of outputs

 
Figure 4 Tactile tools to teach concepts in computation

Figure 4 Tactile tools to teach concepts in computation

Figure 5 High contrast theme and coordinate map

Figure 5 High contrast theme and coordinate map