How do I use p5.js's accessibility features?

p5.js Coding Questions
1

Hey all, long time no see. Hope all is well!

Inspired by this tweet, I’ve been trying to learn how to use p5.js’s describe() function and other accessibility features.

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  describe('testing');
  circle(200, 200, 200);
}

function mousePressed(){
  describe('mouse pressed');      
}

I watched this video and followed the steps:

  • I installed and activated NVDA. (I’m using Windows and Chrome.)
  • I enabled the accessibility settings in the p5.js editor.
  • I played the sketch.
  • I used the tab key to navigate around my screen.

I’ve also read through this accessibility guide.

However, I can’t seem to get NVDA to reliably announce my sketch. I’m using tab to navigate into the output area, but it says:

p5.js web editor describe test document focused read only

(“describe test” is the name of my sketch.)

After a ton of tabbing around, I can occasionally get it to announce:

p5.js web editor describe test document testing

(“testing” is what I’m passing into the describe() function)

However, this seems pretty inconsistent. I don’t hear it every time I tab to the output area, and I can’t seem to always tab to the output area at all.

Oh, and if I activate the invisible “play sketch” button rather than pushing the “play only visual sketch” button, nothing happens.

I’ve also tried opening the sketch output in a new tab, and in that tab NVDA reliably announces “document testing”, but I’m never hearing the “mouse pressed” announcement, or the more descriptive “white circle taking up 2% of the canvas” announcement as shown in the video.

I am very likely missing a particular series of keystrokes to get NVDA to announce the right element. I’m familiar with how screen readers work, but I’m by no means a power user. And I’m very new to NVDA, having mostly used Android TalkBack in the past.

Can anybody help me understand exactly what I need to do in order to reliably hear the announcements, to hear the “mouse pressed” announcement, and to hear the more descriptive “white circle taking up 2% of the canvas” announcements?

2 Likes