Fix Broken examples for textOutput() and gridOutput() and Enhance documentation for textOutput() and gridOutput() methods

src/accessibility/outputs.js

@@ -37,6 +37,19 @@ import p5 from '../core/main';
  * <a href="https://p5js.org/tutorials/writing-accessible-canvas-descriptions/">Writing accessible canvas descriptions</a>
  * to learn more about making sketches accessible.
  *
+ * `textOutput()` currently generates descriptions in English only.
+ * Text drawn with <a href="#/p5/text">text()</a> 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 <a href="#/p5/beginShape">beginShape()</a> are not supported.
+ *
+ * For more precise control over canvas descriptions, consider using
+ * <a href="#/p5/describe">describe()</a> and
+ * <a href="#/p5/describeElement">describeElement()</a>.
+ *
  * @method textOutput
  * @param  {Constant} [display] either FALLBACK or LABEL.
  *
@@ -82,10 +95,12 @@ import p5 from '../core/main';
  *
  * <div>
  * <code>
- * function draw() {
+ * function setup() {
  *   // Add the text description.
  *   textOutput();
+ * }
  *
+ * function draw() {
  *   // Draw a moving circle.
  *   background(200);
  *   let x = frameCount * 0.1;
@@ -102,11 +117,13 @@ import p5 from '../core/main';
  *
  * <div>
  * <code>
- * 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;
@@ -172,6 +189,19 @@ p5.prototype.textOutput = function(display) {
  * <a href="https://p5js.org/tutorials/writing-accessible-canvas-descriptions/">Writing accessible canvas descriptions</a>
  * to learn more about making sketches accessible.
  *
+ * `gridOutput()` currently generates descriptions in English only.
+ * Text drawn with <a href="#/p5/text">text()</a> 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 <a href="#/p5/beginShape">beginShape()</a> are not supported.
+ *
+ * For more precise control over canvas descriptions, consider using
+ * <a href="#/p5/describe">describe()</a> and
+ * <a href="#/p5/describeElement">describeElement()</a>.
+ *
  * @method gridOutput
  * @param  {Constant} [display] either FALLBACK or LABEL.
  *
@@ -217,10 +247,12 @@ p5.prototype.textOutput = function(display) {
  *
  * <div>
  * <code>
- * function draw() {
+ * function setup() {
  *   // Add the grid description.
  *   gridOutput();
+ * }
  *
+ * function draw() {
  *   // Draw a moving circle.
  *   background(200);
  *   let x = frameCount * 0.1;
@@ -237,11 +269,13 @@ p5.prototype.textOutput = function(display) {
  *
  * <div>
  * <code>
- * 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;