p5.js icon indicating copy to clipboard operation
p5.js copied to clipboard

WCAG 2.3.3 - Disabling animation

Open calebfoss opened this issue 8 months ago • 2 comments

Increasing access

This would help p5 creators to follow WCAG 2.3.3 by default.

Most appropriate sub-area of p5.js?

  • [x] Accessibility
  • [ ] Color
  • [ ] Core/Environment/Rendering
  • [ ] Data
  • [ ] DOM
  • [ ] Events
  • [ ] Image
  • [ ] IO
  • [ ] Math
  • [ ] Typography
  • [ ] Utilities
  • [ ] WebGL
  • [ ] Build process
  • [ ] Unit testing
  • [ ] Internationalization
  • [ ] Friendly errors
  • [ ] Other (specify if possible)

Feature request details

This is a sub-issue of #6992

From #6992

WCAG 2.3.3 specifies that "Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed."

I would propose that, by default, p5 create an HTML element that acts as a pause/play button for the sketch, connected to loop()/noLoop(). This behavior could be disabled or reenabled with methods called something like noPause() and allowPause() respectively.

@ksen0 writes

[open for discussion] Disabling Animation - I'm not totally clear on the scope of work here but if the outcome is that there's a html component over the canvas that allows turning off animation (and respects prefers-reduced-motion? Or is that scope creep?) that seems great to work toward

@calebfoss writes

Good point about prefers-reduced-motion, but my take is that starting paused as a default, regardless of prefers-reduced-motion, would keep the implementation simpler and not rely on the page visitor having marked that setting on their device. Bonus benefits of this beyond accessibility would be that the play button could also switch focus to the canvas element and/or initialize audio contexts, allowing keyboard input and audio playback as soon as the button is pressed.

calebfoss avatar May 23 '25 17:05 calebfoss

@ksen0 is this still open if and I would like to contribute?

Himanshu197200 avatar Nov 15 '25 17:11 Himanshu197200

@Himanshu197200 I am delighted to hear that you are interested in this! This is part of a larger proposal from 2024 outlined in #6992 for a set of new accessibility features. One of those features, a color contrast checker was recently implemented, and last I heard, the plan was to next discuss the other features in the proposal including this one. So if you have ideas on how to approach this, my understanding is that those are welcome!

I'm not in a position of authority here and can't assign an issue to you, but as the only accessibility steward at the moment, I'm happy to share feedback on ideas.

calebfoss avatar Nov 17 '25 17:11 calebfoss