From 5c6f5b52bd82ba2554105cbb396ba1df106d18e9 Mon Sep 17 00:00:00 2001 From: Harsh Date: Sun, 5 Oct 2025 09:16:53 +0530 Subject: [PATCH 1/4] 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/4] 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/4] 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; From bd8b34c777b1e4086353c15dc54263ae07cf8327 Mon Sep 17 00:00:00 2001 From: Harsh Date: Mon, 13 Oct 2025 23:58:42 +0530 Subject: [PATCH 4/4] add suggested changes --- src/accessibility/outputs.js | 50 ++++++++++++------------------------ 1 file changed, 16 insertions(+), 34 deletions(-) diff --git a/src/accessibility/outputs.js b/src/accessibility/outputs.js index e8af902fef..ef913739fb 100644 --- a/src/accessibility/outputs.js +++ b/src/accessibility/outputs.js @@ -37,19 +37,6 @@ import p5 from '../core/main'; * Writing accessible canvas descriptions * to learn more about making sketches accessible. * - * `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(). - * * @method textOutput * @param {Constant} [display] either FALLBACK or LABEL. * @@ -96,11 +83,13 @@ import p5 from '../core/main'; *
* * function setup() { - * // Add the text description. - * textOutput(); + * createCanvas(100, 100); * } * * function draw() { + * // Add the text description. + * textOutput(); + * * // Draw a moving circle. * background(200); * let x = frameCount * 0.1; @@ -118,12 +107,14 @@ import p5 from '../core/main'; *
* * function setup() { + * createCanvas(100, 100); + * } + * + * function draw() { * // Add the text description and * // display it for debugging. * textOutput(LABEL); - * } * - * function draw() { * // Draw a moving circle. * background(200); * let x = frameCount * 0.1; @@ -189,19 +180,6 @@ p5.prototype.textOutput = function(display) { * Writing accessible canvas descriptions * to learn more about making sketches accessible. * - * `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(). - * * @method gridOutput * @param {Constant} [display] either FALLBACK or LABEL. * @@ -248,11 +226,13 @@ p5.prototype.textOutput = function(display) { *
* * function setup() { - * // Add the grid description. - * gridOutput(); + * createCanvas(100, 100); * } * * function draw() { + * // Add the grid description. + * gridOutput(); + * * // Draw a moving circle. * background(200); * let x = frameCount * 0.1; @@ -270,12 +250,14 @@ p5.prototype.textOutput = function(display) { *
* * function setup() { + * createCanvas(100, 100); + * } + * + * function draw() { * // Add the grid description and * // display it for debugging. * gridOutput(LABEL); - * } * - * function draw() { * // Draw a moving circle. * background(200); * let x = frameCount * 0.1;