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.
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.
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.
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.
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).