Accessible p5 IDE

Accessibility, Programming

Details in Ability Project

Tools Used : React
In collabaration with Claire Kearney-Volpe and Cassie Tarakajian Worked as the accessible developer on the project

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.
Claire and I worked on making the p5 IDE accessible. While the project is still in beta testing, here are the main features.

The Layout

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

Accessible Options

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

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)

More detailed examples of how the outputs work are present in the below links
Text Output
Grid Output
Sound Output

The accessible outputs are currently being developed in this repository and is linked to the p5 IDE .


← Back to Home