Add the describe() function to live examples #312
Description
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:
- Go to content/examples/... and navigate to the example folder for which you want to add alt-text.
- Locate the liveSketch.js file
- 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
Activity
trikaphundo commented on Aug 24, 2022
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 commented on Aug 24, 2022
Good idea! Let's see if someone wants to take that on :)
himanshu007-creator commented on Nov 23, 2022
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 commented on Nov 24, 2022
Hi @himanshu007-creator. Ideally this should be added to all the live examples coded in p5.
You could start with a few simple ones:
For example, in the On/Off live sketch, the describe() function could be added to the p5 code like so:
yogitheboss commented on Feb 10, 2023
@SableRaf I would love to work on this issue.
Do we have to write good alt text to improve the accessibility of sketches?
SableRaf commented on Feb 13, 2023
@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 commented on Feb 24, 2023
I'd like to contribute to this issue.
Let me know if you're also working on this. Excited to contribute!
SableRaf commented on Feb 24, 2023
Let's see. @yogitheboss are you still working on this?
yogitheboss commented on Feb 24, 2023
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 commented on Feb 24, 2023
For sure! No pressure 😃 I just asked because of @nikhilhvr's request. Good luck with your exams!!
AaryaZ commented on Aug 23, 2023
@SableRaf I see that the issue is still open. Is there anything more needed to be added to this issue?
SableRaf commented on Sep 4, 2023
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 (#447) and provided feedback. We're waiting for those updates. Please check the discussion there for more context.
umangutkarsh commented on Oct 4, 2023
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 commented on Jul 30, 2024
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: #447