Accessibility p5

Accessibility, Programming

Details in Ability Project

Included in the Processing Fellowship

p5.accessibility Library

Tools Used : React, Javascript
In collabaration with Luis Morales-Navarro, Claire Kearney-Volpe

Coding is a means of production and self-expression that should be accessible to everyone. This project is an attempt to level the playing field with people that have low vision or blindness and want to learn to code. In line with the Processing Foundations mission to promote software literacy and empower people of all interests and backgrounds to learn how to program and make creative work with code, the Processing Accessibility Project is a community-based research and development effort involving a large stakeholder network from academia, target end-user's interested in learning how to code and Processings open-source community.

As part of this, we added features to the web p5-web editor to make it more accessible and are working a library that makes the p5 output accessible using a screen reader.

The p5 web editor

The website itself is highly accessible. All elements, including the editor, are readable by screen readers (tested with JAWS/IE, OSX/Safari, NVDA/Firefox).

Apart from the standard web elements, this IDE contains elements that are inclusive of a full programming experience. Two important features are audio warnings for lint messages (which are also visually indicated) and a textual/sonified representation of activity in the canvas (accessible output).
The black boxes in the images below indicate the output of the screen reader when focused on specific areas.

Screen reader output for lint feature

screenshot of the p5 IDE with lint errors and screen reader output screenshot of the p5 IDE with lint errors and screen reader output


The p5.accessibility library

The accessible outputs are currently being developed in this repository.

The library helps makes the accessible p5 canvas available outside of the web IDE through a client side library that allows users to make any p5 sketches accessible for people that are blind and visually impaired. It does so by creating a text/sound based output for what one would see on the canvas.

Screen reader output for canvas

screenshot of the p5 IDE with canvas output of a red ball and screen reader output screenshot of the p5 IDE with canvas output of a red ball and screen reader output

The following video contains a demo of how the canvas output works with voiceover (screen reader software on MacOS)

A more detailed example of how the outputs work is present in the below link
Accessible Outputs


← Back to Home