Back to Projects
Collaborators: Claire Kearney-Volpe, Mathura Govindarajan, Luis Morales-Navarro, Atul Varma and Chancey Fleet

P5 Access Project:
Making creative coding
accessible to screen reader users.


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 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”, 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 Processing’s open-source community. This document details the research done to facilitate a redesign of the Processing Foundation’s learning resources and p5’s web-based development environment to ensure that they are accessible to people with low vision and blindness.

If you are interested in learning more or getting involved please contact Mathura (mmg542(at)nyu(dot)edu), Luis (luis.morales(at)nyu(dot)edu ), or Claire (claire.kv(at)nyu(dot)edu).

Current (Spring 2017 - Fall 2017)

Building on the work done in 2016, Mathura Govindarajan, Luis Morales-Navarro and Claire Kearney-Volpe, continue working to make the p5 accessible for people that are blind and have low-vision not only through the web IDE but through a library that can be used in other settings.
Our current efforts center around:

Optimization of P5 Accessibility Interceptor in the p5 web IDE.

  1. Continual testing and updating of the Interceptor to respond to new browser updates.
  2. Reducing the verbosity of the canvas text output and canvas table text output.
  3. Enabling the use of multiple outputs —text output, sound output, and table output— simultaneously.
  4. Implementation of a high contrast IDE theme for people with low vision
  5. Development of the P5 Accessibility Library
  6. Working towards making 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.

Development of the Accessible P5 Widget.

  1. Testing the Accessible P5 Library by implementing it on the P5 Widget. This should be useful for creating P5 learning materials for people that are blind and visually impaired.

Development of a Color Name Module.

  1. Developing an NPM module/ client side library that when given a HEX or RGB value returns color names that are accessible to people that are blind and visually impaired.

If you are interested in learning more or getting involved please contact Mathura (mmg542(at)nyu(dot)edu), Luis (luis.morales(at)nyu(dot)edu ), or Claire (claire.kv(at)nyu(dot)edu).

Past (Spring 2016 - Fall 2016)

Implementation: Mathura Govindarajan and Claire Kearney-Volpe have been working to make the p5 IDE accessible for people with low vision and blindness. This has involved a great deal of learning, experimenting and testing. The components of the project are as follows:

  1. Cross-platform (Browser+Assistive Tech+OS combination) testing. Our P5 web IDE prototype works best in the following Browser+Assistive Tech+OS combinations:
    • JAWS + Internet Explorer 11+ Windows
    • NVDA+ Firefox/Chrome+Windows
    • VoiceOver + Safari + OSX
    • (Also works on ChromeVox+Chrome+OSX/WIndows)

  2. Code Editor.
    • One of the main components of the IDE is its edit field. The editor that was selected was CodeMirror and this was tested with various OS and screen reader combinations to determine its usability by people with low-vision and blindness.

    • Note: * CodeMirror was one of the most accessible editors that is currently widely supported * We needed to add some extra features such as line number recognition for screen readers

    • Making the UI accessible involves ensuring that all elements present in the webpage/IDE are accessible to screen readers without sacrificing any functionality. Some of the things we are implementing include:
      • * creating accessible elements and ensuring semantic HTML (buttons/labels/links/tables)
      • * including aria-live regions
      • * ensuring the user knows which line number they are on
      • * making lint messages accessible

  3. Creating accessible content for the output.

    Although the content of the canvas is impenetrable by the screenreader, it is important to ensure that the visual and spatial content be explained in some way. To do this, we added a textual counterpart to every object drawn on the canvas. This decision was made by Claire after discovering the WCAG Task Force on Canvas Accessibility ’s recommendation around the creation of Shadow DOMs.
    The output contains a summary, or gist description of what is present in the canvas along with a table that contains details of objects. Both summary and table update in realtime with the sketch.

In addition to this shared implementation documentation, Mathura has documented her internship process and thoughts in Mathura's personal blog.