WCAG 2.3.3 - Disabling animation

Increasing access

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

Most appropriate sub-area of p5.js?

• 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.

Start with the parent issue #6992 and the existing loop()/noLoop() entry points mentioned here. Clarify whether the feature should add a pause/play HTML control, support prefers-reduced-motion, and expose noPause()/allowPause() methods. Done requires an agreed scope and an accessible way to disable or reenable interaction-triggered animation.