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

**URL:** https://discourse.processing.org/t/how-do-i-use-p5-jss-accessibility-features/32412
**Category:** Coding Questions
**Created:** [September 25, 2021, 6:39pm UTC](https://discourse.processing.org/t/how-do-i-use-p5-jss-accessibility-features/32412 "2021-09-25T18:39:31Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)
#### Post date: [September 25, 2021, 6:39pm UTC](https://discourse.processing.org/t/how-do-i-use-p5-jss-accessibility-features/32412/1 "2021-09-25T18:39:31Z")

</div>

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

Inspired by [this tweet](https://twitter.com/laurenleemack/status/1425163230205431808), I’ve been trying to learn how to use p5.js’s [`describe()`](https://p5js.org/reference/#/p5/describe) function and other accessibility features.

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

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

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

```

I watched [this video](https://www.youtube.com/watch?v=gEAoEpmclmE) and followed the steps:

- I installed and activated [NVDA](https://www.nvaccess.org/download/). (I’m using Windows and Chrome.)
- I enabled the [accessibility settings](https://discourse.processing.org/uploads/short-url/3ejIx9YHVGvvAhNN1SQzGVX5dgu.png) 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](https://github.com/processing/p5.js/blob/main/contributor_docs/web_accessibility.md).

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?