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.

[SableRaf]

For sure! No pressure 😃 I just asked because of @nikhilhvr's request. Good luck with your exams!!

[AaryaZ]

@SableRaf I see that the issue is still open. Is there anything more needed to be added to this issue?

[SableRaf]

Hi @AaryaZ, and thank you for pointing that out. The issue is still open due to some pending changes. I had reviewed the PR from @yogitheboss (https://github.com/processing/processing-website/pull/447) and provided feedback. We're waiting for those updates. Please check the discussion there for more context.

[umangutkarsh]

Hi @SableRaf , I'd like to contribute to this issue, if this issue is still open. Please review the changes and provide some feedback on whether this should be modified.

[SableRaf]

Hi @umangutkarsh and thanks for your Pull Request. We have provided feedback in the replies.

For future reference to others willing to contribute alt-text via the describe() function, please see this contribution: https://github.com/processing/processing-website/pull/447