Trying to make the p5.js web editor and p5.js sketches accessible came with its own set of challenges, the main one being that the canvas is probably the single, most inaccessible element in HTML. While it’s possible for a screen reader to recognize the element, it cannot identify all of the elements on it. The reason for this is simple: the canvas behaves just like a physical canvas, once you put paint on it, it covers up what’s behind it. It’s easy to see the color of each pixel but not understand how the pixels comprise shapes and elements. This poses a problem when you are trying to describe the elements on the canvas through code.

There has been an ongoing discussion about next steps for web accessibility on p5.js GitHub. In 2020, describe() and describeElement() were added to p5.js. The describeElement() function creates a screen-reader accessible description for elements —shapes or groups of shapes that create meaning together— in the canvas. The first paramater should be the name of the element. The second parameter should be a string with a description of the element. The third parameter is optional. If specified, it determines how the element description is displayed. Below are the reference code snippet of describeElement() and an example of how to use it.

p5.js describeElement() Reference

Source: https://p5js.org/reference/#/p5/describeElement

describe('Heart and yellow circle over pink background');
noStroke();
background('pink');
describeElement('Circle', 'Yellow circle in the top left corner');
fill('yellow');
ellipse(25, 25, 40, 40);
describeElement('Heart', 'red heart in the bottom right corner');
fill('red');
ellipse(66.6, 66.6, 20, 20);
ellipse(83.2, 66.6, 20, 20);
triangle(91.2, 72.6, 75, 95, 58.6, 72.6);

p5.js describeElement() Example

Author: Luis Morales-Navarro
Source: https://github.com/lm-n/p5-describe-prototypes/blob/f82fcc3cba923d2590d83aef338d22072b99ab2d/describeElement/example1/sketch.js

function setup() {
  createCanvas(300, 200);
  describe('a red wheelbarrow beside the white chickens inspired by "The Red Wheelbarrow" by William Carlos Williams',LABEL);
}

function draw() {
  background('skyblue');
  noStroke();
  fill('#a67b60');
  rect(0,120,300,100);
  //red wheelbarrow
  describeElement("wheelbarrow","A red wheelbarrow whith a gray wheel rests on the brown ground.",LABEL);
  fill('#706a58');
  ellipse(35,137,30,30);
  strokeWeight(3);
  stroke('gray');
  line(135,105,130,140);
  line(124,110,130,140);
  line(35,137,44,100);
  noStroke();
  fill('red');
  quad(30, 75, 60, 130, 140, 105, 140, 76);
  strokeWeight(5);
  stroke('brown');
  line(35,137,200,84);
  //chicken
  let cC= [[200,140],[250,100], [100,150]];
  for (i=0; i<cC.length; i++){
    let x = cC[i][0];
    let y = cC[i][1];
    noStroke();
    fill('red');
    arc(x-12, y-8, 18, 20, radians(180), radians(0), PIE);
    fill(255);
    arc(x, y, 40, 40, 0, PI + QUARTER_PI, PIE);
    arc(x-15, y, 20, 30, radians(180), radians(0), PIE);
    fill('orange');
    triangle(x-25,y,x-36,y,x-23,y-7);
    strokeWeight(3);
    stroke('orange');
    line(x-5,y+20,x-5,y+30);
    line(x+5,y+20,x+5,y+30);
  }
  describeElement("chicken 1","A white chicken infront of the wheelbarrow.",LABEL);
  describeElement("chicken 2","A white chicken to the right of the wheelbarrow.",LABEL);
  describeElement("chicken 3","A white chicken standing between chicken 1 and chicken 2.",LABEL);
}

Below is the poem mentioned in the code:

The Red Wheelbarrow
BY WILLIAM CARLOS WILLIAMS
so much depends
upon

a red wheel
barrow

glazed with rain
water

beside the white
Chickens

Below is a screenshot of the code run on p5.js web editor

There also has been this ongoing discussion on p5.js GitHub, initiated by Lauren Lee McCarthy, about potentially requiring a describe() line in order for a p5 sketch to run. Below is the screenshot of the GitHub issue.

Discussion Questions:

Please feel free to add your question in the thread.

• How can the community form around the creation of functions like ‘describe()’ and ‘describeElement()’?
• What should we do about web accessibility in languages other than English? The functions describe() and describeElement() will support any language but library generated descriptions with textOutput() and gridOutput() as of now will be limited to the English language. We believe these features should be accessible in other languages supported by p5.js.
• How should we expand library generated descriptions?

Qianqian Ye (they/she), p5.js co-lead
evelyn masso (she/they), p5.js co-lead

🌸Introduction

Open source toolkits for the arts such as p5.js play a critical role in promoting software literacy and arts literacy; they are fixtures in educational spaces, having supported millions of students to get started in arts, open-source, and technology fields. Among these tools, p5.js is at the forefront of making concepts and tools accessible and available to people who are historically and systemically excluded from technology and the arts.

p5.js aims to model what it means to be a more accessibility-aware open source community. In 2019, we made the decision that “p5.js will not add any new features except those that increase access.” The p5.js community has made strides toward making learning how to code more inclusive, through the development of accessible creative-coding tools and learning resources, and a more accessibility-aware open source community. Our aim as a community is not only to promote and incorporate established best practices, but push the bounds of accessibility and creative practice.

The p5.js community published a statement about its focus on access in mid-2020 as a guiding document. Access can take many forms. It can mean providing accessible tools for creating accessible works on the web, investing in robust documentation offered in many languages, staying free of cost for non-commercial use, highlighting the work of marginalized people in the project, and more.

Access here means making p5.js better for:

• People with disabilities or illness
• People who speak languages other than English
• Black people, Indigenous peoples, and People of Color
• People who are lesbian, gay, bisexual, trans, or queer
• People with marginalized genders
• People who lack opportunities and/or resources to engage with creative coding due to class or income
• People with little or no prior experience in open source and creative coding
• and other people who are systemically excluded and historically underrepresented

Our group discusses access in Open-Source Software Toolkits for the Arts (OSSTA), like p5.js, Processing, openFrameworks, Cinder, three.js, and more. This discussion will provide space for contributors and users of p5.js and practitioners from outside OSSTA projects to share their knowledge, perspective, and dreams for building greater access to technical and arts spaces with the public.

Discussion

We invite you to join us in exploring these and other issues in accessibility, with these questions in mind:

• What are barriers you’ve experienced in using, working in, or contributing to open source software? What resources or strategies were helpful in navigating these barriers?
• How can access in open source software for the arts/creative expression be radically expanded?
• How can accessibility in open source software contribute to web accessibility in large?
• What successful (or promising) practices have you seen used to increase access to open source software?
• What can we learn from some of the good practices for increasing access outside of OSSTA projects?
• At what social levels (e.g. individuals, projects, organizations, industry, etc) do you think change would be most transformative to these issues?