processing / processing/processing-website
Add the describe() function to live examples
Open
@yogitheboss is already working on this.
Since Feb 13, 2023.
Accessibility
Enhancement
Examples
Good First Issue
Help Wanted
- Dominant language
- MDX
- Stars
- 90
- Forks
- 122
- Avg merge
- 1h 43m
- Merged PRs (30d)
- 3
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.jsfile - In the
s.setupfunction add ans.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
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.