From 5c6f5b52bd82ba2554105cbb396ba1df106d18e9 Mon Sep 17 00:00:00 2001 From: Harsh Date: Sun, 5 Oct 2025 09:16:53 +0530 Subject: [PATCH 1/3] Enhance documentation for textOutput() and gridOutput() methods, detailing known limitations and alternatives for accessible canvas descriptions. --- src/accessibility/outputs.js | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/src/accessibility/outputs.js b/src/accessibility/outputs.js index 38ba679e38..e2a1a2e045 100644 --- a/src/accessibility/outputs.js +++ b/src/accessibility/outputs.js @@ -37,6 +37,20 @@ import p5 from '../core/main'; * Writing accessible canvas descriptions * to learn more about making sketches accessible. * + * `textOutput()` has several known limitations. Descriptions are only + * generated in English. Text drawn with text() is + * not described. `textOutput()` does not work with WEBGL mode or 3D shapes. + * 2D primitives rendered in WEBGL may be described incorrectly because the + * camera's perspective is not accounted for. Shapes with similar features may + * be combined in descriptions, resulting in inaccurate counts. Shapes + * positioned outside the canvas boundaries are described as though they're + * visible. Custom 2D shapes created with + * beginShape() are not described. + * + * describe() and + * describeElement() provide more accurate + * and flexible alternatives for writing canvas descriptions. + * * @method textOutput * @param {Constant} [display] either FALLBACK or LABEL. * @@ -172,6 +186,20 @@ p5.prototype.textOutput = function(display) { * Writing accessible canvas descriptions * to learn more about making sketches accessible. * + * `gridOutput()` has several known limitations. Descriptions are only + * generated in English. Text drawn with text() is + * not described. `gridOutput()` does not work with WEBGL mode or 3D shapes. + * 2D primitives rendered in WEBGL may be described incorrectly because the + * camera's perspective is not accounted for. Shapes with similar features may + * be combined in descriptions, resulting in inaccurate counts. Shapes + * positioned outside the canvas boundaries are described as though they're + * visible. Custom 2D shapes created with + * beginShape() are not described. + * + * describe() and + * describeElement() provide more accurate + * and flexible alternatives for writing canvas descriptions. + * * @method gridOutput * @param {Constant} [display] either FALLBACK or LABEL. * From f55350bcd148128468c2ab8b7cc6c0fb393260c4 Mon Sep 17 00:00:00 2001 From: Harsh Date: Mon, 6 Oct 2025 19:36:42 +0530 Subject: [PATCH 2/3] improve documentation for textOutput() and gridOutput() --- src/accessibility/outputs.js | 44 +++++++++++++++++------------------- 1 file changed, 21 insertions(+), 23 deletions(-) diff --git a/src/accessibility/outputs.js b/src/accessibility/outputs.js index e2a1a2e045..e5da2d84c5 100644 --- a/src/accessibility/outputs.js +++ b/src/accessibility/outputs.js @@ -37,19 +37,18 @@ import p5 from '../core/main'; * Writing accessible canvas descriptions * to learn more about making sketches accessible. * - * `textOutput()` has several known limitations. Descriptions are only - * generated in English. Text drawn with text() is - * not described. `textOutput()` does not work with WEBGL mode or 3D shapes. - * 2D primitives rendered in WEBGL may be described incorrectly because the - * camera's perspective is not accounted for. Shapes with similar features may - * be combined in descriptions, resulting in inaccurate counts. Shapes - * positioned outside the canvas boundaries are described as though they're - * visible. Custom 2D shapes created with - * beginShape() are not described. - * + *`textOutput()` currently generates descriptions in English only. + * Text drawn with text() is not included in + * descriptions. WEBGL mode and 3D shapes are not supported. When rendering + * 2D primitives in WEBGL, descriptions may be imprecise as the camera's + * perspective is not accounted for. Shapes with similar features may be + * combined, which can affect shape counts. Shapes positioned outside the + * canvas boundaries may still be included in descriptions. Custom 2D shapes + * created with beginShape() are not supported. + * + * For more precise control over canvas descriptions, consider using * describe() and - * describeElement() provide more accurate - * and flexible alternatives for writing canvas descriptions. + * describeElement(). * * @method textOutput * @param {Constant} [display] either FALLBACK or LABEL. @@ -186,19 +185,18 @@ p5.prototype.textOutput = function(display) { * Writing accessible canvas descriptions * to learn more about making sketches accessible. * - * `gridOutput()` has several known limitations. Descriptions are only - * generated in English. Text drawn with text() is - * not described. `gridOutput()` does not work with WEBGL mode or 3D shapes. - * 2D primitives rendered in WEBGL may be described incorrectly because the - * camera's perspective is not accounted for. Shapes with similar features may - * be combined in descriptions, resulting in inaccurate counts. Shapes - * positioned outside the canvas boundaries are described as though they're - * visible. Custom 2D shapes created with - * beginShape() are not described. + *`gridOutput()` currently generates descriptions in English only. + * Text drawn with text() is not included in + * descriptions. WEBGL mode and 3D shapes are not supported. When rendering + * 2D primitives in WEBGL, descriptions may be imprecise as the camera's + * perspective is not accounted for. Shapes with similar features may be + * combined, which can affect shape counts. Shapes positioned outside the + * canvas boundaries may still be included in descriptions. Custom 2D shapes + * created with beginShape() are not supported. * + * For more precise control over canvas descriptions, consider using * describe() and - * describeElement() provide more accurate - * and flexible alternatives for writing canvas descriptions. + * describeElement(). * * @method gridOutput * @param {Constant} [display] either FALLBACK or LABEL. From 5f220bc26da1d85abe205fd25e7479eb29e800d9 Mon Sep 17 00:00:00 2001 From: Harsh Date: Mon, 6 Oct 2025 22:46:51 +0530 Subject: [PATCH 3/3] fix examples that were not working --- src/accessibility/outputs.js | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/src/accessibility/outputs.js b/src/accessibility/outputs.js index e5da2d84c5..e8af902fef 100644 --- a/src/accessibility/outputs.js +++ b/src/accessibility/outputs.js @@ -37,7 +37,7 @@ import p5 from '../core/main'; * Writing accessible canvas descriptions * to learn more about making sketches accessible. * - *`textOutput()` currently generates descriptions in English only. + * `textOutput()` currently generates descriptions in English only. * Text drawn with text() is not included in * descriptions. WEBGL mode and 3D shapes are not supported. When rendering * 2D primitives in WEBGL, descriptions may be imprecise as the camera's @@ -95,10 +95,12 @@ import p5 from '../core/main'; * *
* - * function draw() { + * function setup() { * // Add the text description. * textOutput(); + * } * + * function draw() { * // Draw a moving circle. * background(200); * let x = frameCount * 0.1; @@ -115,11 +117,13 @@ import p5 from '../core/main'; * *
* - * function draw() { + * function setup() { * // Add the text description and * // display it for debugging. * textOutput(LABEL); + * } * + * function draw() { * // Draw a moving circle. * background(200); * let x = frameCount * 0.1; @@ -185,7 +189,7 @@ p5.prototype.textOutput = function(display) { * Writing accessible canvas descriptions * to learn more about making sketches accessible. * - *`gridOutput()` currently generates descriptions in English only. + * `gridOutput()` currently generates descriptions in English only. * Text drawn with text() is not included in * descriptions. WEBGL mode and 3D shapes are not supported. When rendering * 2D primitives in WEBGL, descriptions may be imprecise as the camera's @@ -243,10 +247,12 @@ p5.prototype.textOutput = function(display) { * *
* - * function draw() { + * function setup() { * // Add the grid description. * gridOutput(); + * } * + * function draw() { * // Draw a moving circle. * background(200); * let x = frameCount * 0.1; @@ -263,11 +269,13 @@ p5.prototype.textOutput = function(display) { * *
* - * function draw() { + * function setup() { * // Add the grid description and * // display it for debugging. * gridOutput(LABEL); + * } * + * function draw() { * // Draw a moving circle. * background(200); * let x = frameCount * 0.1;