Skip to content

Added Describe as Default Function #3081 #3380

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from

Conversation

Harshit-7373
Copy link
Contributor

@Harshit-7373 Harshit-7373 commented Mar 8, 2025

Fixes #3081

Changes:

  1. Updated the createDefault.js file and added the required feauture.

I have verified that this pull request:

  • has no linting errors (npm run lint)
  • has no test errors (npm run test)
  • is from a uniquely-named feature branch and is up to date with the develop branch.
  • is descriptively named and links to an issue number, i.e. Fixes #123

@Harshit-7373
Copy link
Contributor Author

Harshit-7373 commented Mar 8, 2025

Screenshot 2025-03-08 at 8 23 56 PM

@raclim Please review my PR . I have updated the required changes.

@Jatin24062005
Copy link
Contributor

Jatin24062005 commented Mar 9, 2025

@Harshit-7373 Maybe you Forget the mention Issue Number????????. It would be better to Provide issue number for the better tracking.

@Harshit-7373
Copy link
Contributor Author

@Jatin24062005 Yes , I forgot to mention the issue number in the PR . I have now updated the PR description. The issue number is #3081

@raclim
Copy link
Collaborator

raclim commented Mar 10, 2025

Thanks @Harshit-7373 for taking a look into this!

I think the general implementation here is correct! One other change that could've been helpful here is to have the text content align more with some of the suggestions within the attached issue.

Since this is a somewhat major outward facing change, I think we might need further discussion on how it's implemented, when it should be introduced to the community, and ensure it doesn't conflict with other changes that are happening within the p5.js library and p5.js editor. I think this comment mentions the discussion on the proposed guidelines around the describe() function that's happening within the p5.js library, which I think we might want to wait to see what's happening there before implementing here.

Since this might take more planning first and isn't ready to be implemented yet, I'm going to close this for now. However, please feel free to revisit this once the discussion on it has been settled!

@raclim raclim closed this Mar 10, 2025
@raclim raclim reopened this May 12, 2025
@ksen0
Copy link
Member

ksen0 commented May 12, 2025

This would be great to add! How about this for the comment text, so it's a bit more of a guidance:

"Did you know? The canvas element is not accessible to screen readers, but it can be! Use describe(..) to create a accessible description of your sketch. Read more about screen reader support here: https://p5js.org/tutorials/writing-accessible-canvas-descriptions/"

Maybe the link in comments is excessive 😅

@raclim
Copy link
Collaborator

raclim commented May 12, 2025

Hey @Harshit-7373 just wanted to update that after some internal discussion @ksen0 and I thought it would be great to revisit this issue, so I reopened your PR!

"Did you know? The canvas element is not accessible to screen readers, but it can be! Use describe(..) to create a accessible description of your sketch. Read more about screen reader support here: https://p5js.org/tutorials/writing-accessible-canvas-descriptions/"

I really love this version of the commented text! I'm wondering if the last line with the link might not be needed, and could also pose an accessibility issue if the linked text isn't descriptive? Please feel free to add any additional thoughts on this here!

@SableRaf
Copy link
Contributor

SableRaf commented Jun 9, 2025

This is great! I'm really glad to see more encouragement to use describe().

A couple small thoughts:

  • Many beginners might not know what a "canvas element" is. Referring to "your sketch" might be clearer.
  • Also, not everyone knows what a screen reader is. It could help to focus less on the tech and more on the people it’s for.

A few possible alternatives:

// Help blind or low-vision users understand your sketch
describe("Write description of your project");
// Describe your sketch for people using screen readers (e.g. blind or low-vision users)
describe("Write description of your project");
// This description is read aloud to blind or low-vision users who use a screen reader
describe("Write description of your project");

@xinemata
Copy link

xinemata commented Jun 9, 2025

Thanks so much for this exciting suggestion! I agree with @SableRaf on prioritizing beginners in the explanation of describe().

I also think that if the user has never seen an example of an alt-text in the past, "Write description of your project" can be broadly interpreted in this context. In this case, I'd recommend prioritizing doing over telling by showing an example of alt-text inside describe(). For instance:

function setup() {
  createCanvas(400, 400);
  background(220);
  // Help blind or low-vision users understand your sketch
  describe("A 400 by 400 pixel gray canvas.");
}

This would also be more aligned with how describe() gets communicated under p5.js website's references (here's one example). And if a user is still confused by their initial encounter with describe() in the editor, this provides another route for them to put the two together once they dive into the reference page.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Adding describe() as default function to increase accessibility
6 participants