Added Describe as Default Function #3081

[Harshit-7373]

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]

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

[Jatin24062005]

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

[Harshit-7373]

@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]

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!

[ksen0]

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]

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]

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]

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.