Add the describe() function to live examples

[SableRaf]

Since p5.js has a convenient function to make sketches accessible to screen readers, it would be a great idea to use it.

Here's an example of how to do it:

1. Go to content/examples/... and navigate to the example folder for which you want to add alt-text.
2. Locate the liveSketch.js file
3. In the s.setup function add an s.describe() function and pass it your alt-text as a string.

For example:

s.describe(
      'there are two dark spheres side by side, the cursor works like a light source, when mouse moves the direction of light changes and reveals some part of spheres.'
    );

Edit: see for reference 👇

• https://github.com/processing/processing-website#readme
• https://github.com/processing/processing-website/blob/main/docs/examples.md
• https://p5js.org/reference/#/p5/describe
• https://design102.blog.gov.uk/2022/01/14/whats-the-alternative-how-to-write-good-alt-text/

July 30th 2024 edit: added step by step instructions

[trikaphundo]

I can definitely take on this, but as it is quite easy, would you prefer to label it as "good first issue" or so? So that a newcomer (newer than me at least ^^') can tackle on this and get acquainted with VCS?

[SableRaf]

Good idea! Let's see if someone wants to take that on :)

[himanshu007-creator]

Hi @SableRaf , i would like to work on this issue, only doubt is to which all examples do i have to add the describe function, can you point out these examples to me?

[SableRaf]

Hi @himanshu007-creator. Ideally this should be added to all the live examples coded in p5.

You could start with a few simple ones:

• https://processing.org/examples/colorvariables.html
• https://processing.org/examples/directional.html
• https://processing.org/examples/mixture.html
• https://processing.org/examples/mixturegrid.html
• https://processing.org/examples/onoff.html
• https://processing.org/examples/reflection.html

For example, in the On/Off live sketch, the describe() function could be added to the p5 code like so:

describe(`A shaded grey cube is rotating slowly. When the mouse is clicked the lights() function is turned off and the cube appears a solid white color.`);

[yogitheboss]

@SableRaf I would love to work on this issue.
Do we have to write good alt text to improve the accessibility of sketches?

[SableRaf]

@yogitheboss That's the idea yes! Some might be easier than others. I have listed a few low hanging fruits in the message above. I'll assign this to you. Feel free to ask if you need any more input.

[nikhilhvr]

I'd like to contribute to this issue.
Let me know if you're also working on this. Excited to contribute!

[SableRaf]

Let's see. @yogitheboss are you still working on this?

[yogitheboss]

Yes @SableRaf I am still working on this issue.
I would try to pull request few examples tomorrow.
Sorry for being late, my exams are going on.