diff --git a/contributor_docs/inline_documentation.md b/contributor_docs/inline_documentation.md
index 4f0892648f..2349f64a05 100644
--- a/contributor_docs/inline_documentation.md
+++ b/contributor_docs/inline_documentation.md
@@ -189,6 +189,7 @@ noFill();
 arc(50, 55, 60, 60, HALF_PI, PI);
 arc(50, 55, 70, 70, PI, PI+QUARTER_PI);
 arc(50, 55, 80, 80, PI+QUARTER_PI, TWO_PI);
+describe('shattered outline of ellipse created using four arcs');
 </code>
 </div>
 ```
@@ -200,11 +201,17 @@ by a line break.
 ```
 @example
 <div>
-<code>arc(50, 50, 80, 80, 0, PI+QUARTER_PI, OPEN);</code>
+<code>
+arc(50, 50, 80, 80, 0, PI+QUARTER_PI, OPEN);
+describe('ellipse created using arc with its top right open');
+</code>
 </div>
 
 <div>
-<code>arc(50, 50, 80, 80, 0, PI, OPEN);</code>
+<code>
+arc(50, 50, 80, 80, 0, PI, OPEN);
+describe('bottom half of an ellipse created using arc');
+</code>
 </div>
 ```
 
@@ -212,7 +219,10 @@ If you do not want the example to execute your code (i.e. you just want the code
 ```
 @example
 <div class="norender">
-<code>arc(50, 50, 80, 80, 0, PI+QUARTER_PI, OPEN);</code>
+<code>
+arc(50, 50, 80, 80, 0, PI+QUARTER_PI, OPEN);
+describe('ellipse created using arc with its top right open');
+</code>
 </div>
 ```
 
@@ -230,8 +240,42 @@ function setup() {
 
 If you need to link to external asset files, put them in [/docs/yuidoc-p5-theme/assets](https://github.com/processing/p5.js/tree/main/docs/yuidoc-p5-theme/assets) and then link to them with "assets/filename.ext" in the code. See the [tint example](http://p5js.org/reference/#/p5/tint).
 
-### Adding alt-text
-Finally, for every example you add, please add [alt-text](https://moz.com/learn/seo/alt-text) so visually impaired users can understand what the example is showing on the screen. This can be added with the tag `@alt` at the end of all of the examples for a given function (not an individual `@alt` tag under each), add a line break to separate the descriptions for multiple examples.
+### Add a canvas description using describe()
+Finally, for every example you add, you are required to use the p5.js function `describe()` in the example to create a screen-reader accessible description for the canvas. Include only one parameter: a string with a brief description of what is happening on the canvas. Do NOT add a second parameter.
+```
+@example
+<div>
+<code>
+let xoff = 0.0;
+function draw() {
+  background(204);
+  xoff = xoff + 0.01;
+  let n = noise(xoff) * width;
+  line(n, 0, n, height);
+  decribe('vertical line moves left to right with updating noise values');
+}
+</code>
+</div>
+
+<div>
+<code>
+let noiseScale=0.02;
+function draw() {
+  background(0);
+  for (let x=0; x < width; x++) {
+    let noiseVal = noise((mouseX+x)*noiseScale, mouseY*noiseScale);
+    stroke(noiseVal*255);
+    line(x, mouseY+noiseVal*80, x, height);
+  }
+  describe('horizontal wave pattern effected by mouse x-position & updating noise values');
+}
+</code>
+</div>
+
+```
+For more on `describe()` visit the [web accessibility contributor docs](https://p5js.org/contributor-docs/#/web_accessibility?id=user-generated-accessible-canvas-descriptions).
+
+Previous documentation guidelines required adding [alt-text](https://moz.com/learn/seo/alt-text) to create screen-reader accessible canvas description. THIS IS NO LONGER RECOMMENDED. ALWAYS USE `describe()`. Previously, alt-text was added with the tag `@alt` at the end of all of the examples for a given function (not an individual `@alt` tag under each), and an added a line break to separate the descriptions for multiple examples. 
 ```
 @example
 <div>
diff --git a/src/color/setting.js b/src/color/setting.js
index d1ddde5541..2fe23fe049 100644
--- a/src/color/setting.js
+++ b/src/color/setting.js
@@ -40,6 +40,7 @@ import './p5.Color';
  * <code>
  * // Grayscale integer value
  * background(51);
+ * describe('canvas with darkest charcoal grey background');
  * </code>
  * </div>
  *
@@ -47,6 +48,7 @@ import './p5.Color';
  * <code>
  * // R, G & B integer values
  * background(255, 204, 0);
+ * describe('canvas with yellow background');
  * </code>
  * </div>
  *
@@ -55,6 +57,7 @@ import './p5.Color';
  * // H, S & B integer values
  * colorMode(HSB);
  * background(255, 204, 100);
+ * describe('canvas with royal blue background');
  * </code>
  * </div>
  *
@@ -62,6 +65,7 @@ import './p5.Color';
  * <code>
  * // Named SVG/CSS color string
  * background('red');
+ * describe('canvas with red background');
  * </code>
  * </div>
  *
@@ -69,6 +73,7 @@ import './p5.Color';
  * <code>
  * // three-digit hexadecimal RGB notation
  * background('#fae');
+ * describe('canvas with pink background');
  * </code>
  * </div>
  *
@@ -76,6 +81,7 @@ import './p5.Color';
  * <code>
  * // six-digit hexadecimal RGB notation
  * background('#222222');
+ * describe('canvas with black background');
  * </code>
  * </div>
  *
@@ -83,6 +89,7 @@ import './p5.Color';
  * <code>
  * // integer RGB notation
  * background('rgb(0,255,0)');
+ * describe('canvas with bright green background');
  * </code>
  * </div>
  *
@@ -90,6 +97,7 @@ import './p5.Color';
  * <code>
  * // integer RGBA notation
  * background('rgba(0,255,0, 0.25)');
+ * describe('canvas with soft green background');
  * </code>
  * </div>
  *
@@ -97,6 +105,7 @@ import './p5.Color';
  * <code>
  * // percentage RGB notation
  * background('rgb(100%,0%,10%)');
+ * describe('canvas with red background');
  * </code>
  * </div>
  *
@@ -104,6 +113,7 @@ import './p5.Color';
  * <code>
  * // percentage RGBA notation
  * background('rgba(100%,0%,100%,0.5)');
+ * describe('canvas with light purple background');
  * </code>
  * </div>
  *
@@ -111,21 +121,10 @@ import './p5.Color';
  * <code>
  * // p5 Color object
  * background(color(0, 0, 255));
+ * describe('canvas with blue background');
  * </code>
  * </div>
  *
- * @alt
- * canvas with darkest charcoal grey background.
- * canvas with yellow background.
- * canvas with royal blue background.
- * canvas with red background.
- * canvas with pink background.
- * canvas with black background.
- * canvas with bright green background.
- * canvas with soft green background.
- * canvas with red background.
- * canvas with light purple background.
- * canvas with blue background.
  */
 
 /**
@@ -194,16 +193,20 @@ p5.prototype.background = function(...args) {
  * // Clear the screen on mouse press.
  * function draw() {
  *   ellipse(mouseX, mouseY, 20, 20);
+ *   describe(
+ *     'small white ellipses are continually drawn at mouse x and y coordinates'
+ *   );
  * }
  * function mousePressed() {
  *   clear();
  *   background(128);
+ *   describe(
+ *     'canvas is cleared, small white ellipse is drawn at mouse X and mouse Y'
+ *   );
  * }
  * </code>
  * </div>
  *
- * @alt
- * small white ellipses are continually drawn at mouse's x and y coordinates.
  */
 
 p5.prototype.clear = function() {
@@ -241,6 +244,9 @@ p5.prototype.clear = function() {
  *     point(i, j);
  *   }
  * }
+ * describe(
+ *   'Green to red gradient from bottom left to top red with shading from top left'
+ * );
  * </code>
  * </div>
  *
@@ -254,6 +260,9 @@ p5.prototype.clear = function() {
  *     point(i, j);
  *   }
  * }
+ * describe(
+ *   'Rainbow gradient from left to right, brightness increasing to white at top'
+ * );
  * </code>
  * </div>
  *
@@ -264,6 +273,7 @@ p5.prototype.clear = function() {
  * colorMode(RGB, 1);
  * let myColor = c._getRed();
  * text(myColor, 10, 10, 80, 80);
+ * describe('value of color red 0.4980... written on canvas');
  * </code>
  * </div>
  *
@@ -276,14 +286,10 @@ p5.prototype.clear = function() {
  * stroke(255, 0, 10, 0.3);
  * ellipse(40, 40, 50, 50);
  * ellipse(50, 50, 40, 40);
+ * describe('two translucent pink ellipse outlines at middle left and at center');
  * </code>
  * </div>
  *
- * @alt
- *Green to red gradient from bottom L to top R. shading originates from top left.
- *Rainbow gradient from left to right. Brightness increasing to white at top.
- *unknown image.
- *50x50 ellipse at middle L & 40x40 ellipse at center. Translucent pink outlines.
  */
 
 /**
@@ -359,6 +365,7 @@ p5.prototype.colorMode = function(mode, max1, max2, max3, maxA) {
  * // Grayscale integer value
  * fill(51);
  * rect(20, 20, 60, 60);
+ * describe('dark charcoal grey rect with black outline in center of canvas');
  * </code>
  * </div>
  *
@@ -367,6 +374,7 @@ p5.prototype.colorMode = function(mode, max1, max2, max3, maxA) {
  * // R, G & B integer values
  * fill(255, 204, 0);
  * rect(20, 20, 60, 60);
+ * describe('yellow rect with black outline in center of canvas');
  * </code>
  * </div>
  *
@@ -376,6 +384,7 @@ p5.prototype.colorMode = function(mode, max1, max2, max3, maxA) {
  * colorMode(HSB);
  * fill(255, 204, 100);
  * rect(20, 20, 60, 60);
+ * describe('royal blue rect with black outline in center of canvas');
  * </code>
  * </div>
  *
@@ -384,6 +393,7 @@ p5.prototype.colorMode = function(mode, max1, max2, max3, maxA) {
  * // Named SVG/CSS color string
  * fill('red');
  * rect(20, 20, 60, 60);
+ * describe('red rect with black outline in center of canvas');
  * </code>
  * </div>
  *
@@ -392,6 +402,7 @@ p5.prototype.colorMode = function(mode, max1, max2, max3, maxA) {
  * // three-digit hexadecimal RGB notation
  * fill('#fae');
  * rect(20, 20, 60, 60);
+ * describe('pink rect with black outline in center of canvas');
  * </code>
  * </div>
  *
@@ -400,6 +411,7 @@ p5.prototype.colorMode = function(mode, max1, max2, max3, maxA) {
  * // six-digit hexadecimal RGB notation
  * fill('#222222');
  * rect(20, 20, 60, 60);
+ * describe('black rect with black outline in center of canvas');
  * </code>
  * </div>
  *
@@ -408,6 +420,7 @@ p5.prototype.colorMode = function(mode, max1, max2, max3, maxA) {
  * // integer RGB notation
  * fill('rgb(0,255,0)');
  * rect(20, 20, 60, 60);
+ * describe('bright green rect with black outline in center of canvas');
  * </code>
  * </div>
  *
@@ -416,6 +429,7 @@ p5.prototype.colorMode = function(mode, max1, max2, max3, maxA) {
  * // integer RGBA notation
  * fill('rgba(0,255,0, 0.25)');
  * rect(20, 20, 60, 60);
+ * describe('soft green rect with black outline in center of canvas');
  * </code>
  * </div>
  *
@@ -424,6 +438,7 @@ p5.prototype.colorMode = function(mode, max1, max2, max3, maxA) {
  * // percentage RGB notation
  * fill('rgb(100%,0%,10%)');
  * rect(20, 20, 60, 60);
+ * describe('red rect with black outline in center of canvas');
  * </code>
  * </div>
  *
@@ -432,6 +447,7 @@ p5.prototype.colorMode = function(mode, max1, max2, max3, maxA) {
  * // percentage RGBA notation
  * fill('rgba(100%,0%,100%,0.5)');
  * rect(20, 20, 60, 60);
+ * describe('dark fuchsia rect with black outline in center of canvas');
  * </code>
  * </div>
  *
@@ -440,21 +456,10 @@ p5.prototype.colorMode = function(mode, max1, max2, max3, maxA) {
  * // p5 Color object
  * fill(color(0, 0, 255));
  * rect(20, 20, 60, 60);
+ * describe('blue rect with black outline in center of canvas');
  * </code>
  * </div>
  *
- * @alt
- * 60x60 dark charcoal grey rect with black outline in center of canvas.
- * 60x60 yellow rect with black outline in center of canvas.
- * 60x60 royal blue rect with black outline in center of canvas.
- * 60x60 red rect with black outline in center of canvas.
- * 60x60 pink rect with black outline in center of canvas.
- * 60x60 black rect with black outline in center of canvas.
- * 60x60 light green rect with black outline in center of canvas.
- * 60x60 soft green rect with black outline in center of canvas.
- * 60x60 red rect with black outline in center of canvas.
- * 60x60 dark fuchsia rect with black outline in center of canvas.
- * 60x60 blue rect with black outline in center of canvas.
  */
 
 /**
@@ -501,6 +506,7 @@ p5.prototype.fill = function(...args) {
  * rect(15, 10, 55, 55);
  * noFill();
  * rect(20, 20, 60, 60);
+ * describe('noFill rect center over white rect. Both 60x60 with black outlines');
  * </code>
  * </div>
  *
@@ -517,13 +523,11 @@ p5.prototype.fill = function(...args) {
  *   rotateX(frameCount * 0.01);
  *   rotateY(frameCount * 0.01);
  *   box(45, 45, 45);
+ *   describe('black canvas with purple cube wireframe spinning');
  * }
  * </code>
  * </div>
  *
- * @alt
- * white rect top middle and noFill rect center. Both 60x60 with black outlines.
- * black canvas with purple cube wireframe spinning
  */
 p5.prototype.noFill = function() {
   this._renderer._setProperty('_doFill', false);
@@ -541,6 +545,7 @@ p5.prototype.noFill = function() {
  * <code>
  * noStroke();
  * rect(20, 20, 60, 60);
+ * describe('60x60 white rect at center. no outline');
  * </code>
  * </div>
  *
@@ -557,13 +562,11 @@ p5.prototype.noFill = function() {
  *   rotateX(frameCount * 0.01);
  *   rotateY(frameCount * 0.01);
  *   box(45, 45, 45);
+ *   describe('black canvas with pink cube spinning');
  * }
  * </code>
  * </div>
  *
- * @alt
- * 60x60 white rect at center. no outline.
- * black canvas with pink cube spinning
  */
 p5.prototype.noStroke = function() {
   this._renderer._setProperty('_doStroke', false);
@@ -601,6 +604,7 @@ p5.prototype.noStroke = function() {
  * strokeWeight(4);
  * stroke(51);
  * rect(20, 20, 60, 60);
+ * describe('60x60 white rect at center. Dark charcoal grey outline');
  * </code>
  * </div>
  *
@@ -610,6 +614,7 @@ p5.prototype.noStroke = function() {
  * stroke(255, 204, 0);
  * strokeWeight(4);
  * rect(20, 20, 60, 60);
+ * describe('60x60 white rect at center. Yellow outline');
  * </code>
  * </div>
  *
@@ -620,6 +625,7 @@ p5.prototype.noStroke = function() {
  * strokeWeight(4);
  * stroke(255, 204, 100);
  * rect(20, 20, 60, 60);
+ * describe('60x60 white rect at center. Royal blue outline');
  * </code>
  * </div>
  *
@@ -629,6 +635,7 @@ p5.prototype.noStroke = function() {
  * stroke('red');
  * strokeWeight(4);
  * rect(20, 20, 60, 60);
+ * describe('60x60 white rect at center. Red outline');
  * </code>
  * </div>
  *
@@ -638,6 +645,7 @@ p5.prototype.noStroke = function() {
  * stroke('#fae');
  * strokeWeight(4);
  * rect(20, 20, 60, 60);
+ * describe('60x60 white rect at center. Pink outline');
  * </code>
  * </div>
  *
@@ -647,6 +655,7 @@ p5.prototype.noStroke = function() {
  * stroke('#222222');
  * strokeWeight(4);
  * rect(20, 20, 60, 60);
+ * describe('60x60 white rect at center. Black outline');
  * </code>
  * </div>
  *
@@ -656,6 +665,7 @@ p5.prototype.noStroke = function() {
  * stroke('rgb(0,255,0)');
  * strokeWeight(4);
  * rect(20, 20, 60, 60);
+ * describe('60x60 white rect at center. Bright green outline');
  * </code>
  * </div>
  *
@@ -665,6 +675,7 @@ p5.prototype.noStroke = function() {
  * stroke('rgba(0,255,0,0.25)');
  * strokeWeight(4);
  * rect(20, 20, 60, 60);
+ * describe('60x60 white rect at center. Soft green outline');
  * </code>
  * </div>
  *
@@ -674,6 +685,7 @@ p5.prototype.noStroke = function() {
  * stroke('rgb(100%,0%,10%)');
  * strokeWeight(4);
  * rect(20, 20, 60, 60);
+ * describe('60x60 white rect at center. Red outline');
  * </code>
  * </div>
  *
@@ -683,6 +695,7 @@ p5.prototype.noStroke = function() {
  * stroke('rgba(100%,0%,100%,0.5)');
  * strokeWeight(4);
  * rect(20, 20, 60, 60);
+ * describe('60x60 white rect at center. Dark fuchsia outline');
  * </code>
  * </div>
  *
@@ -692,21 +705,10 @@ p5.prototype.noStroke = function() {
  * stroke(color(0, 0, 255));
  * strokeWeight(4);
  * rect(20, 20, 60, 60);
+ * describe('60x60 white rect at center. Blue outline');
  * </code>
  * </div>
  *
- * @alt
- * 60x60 white rect at center. Dark charcoal grey outline.
- * 60x60 white rect at center. Yellow outline.
- * 60x60 white rect at center. Royal blue outline.
- * 60x60 white rect at center. Red outline.
- * 60x60 white rect at center. Pink outline.
- * 60x60 white rect at center. Black outline.
- * 60x60 white rect at center. Bright green outline.
- * 60x60 white rect at center. Soft green outline.
- * 60x60 white rect at center. Red outline.
- * 60x60 white rect at center. Dark fuchsia outline.
- * 60x60 white rect at center. Blue outline.
  */
 
 /**
@@ -769,6 +771,9 @@ p5.prototype.stroke = function(...args) {
  * erase();
  * ellipse(25, 30, 30);
  * noErase();
+ * describe(
+ *   'centered pink rect over purple background. Elliptical area in top-left of rect is erased white'
+ * );
  * </code>
  * </div>
  *
@@ -781,6 +786,9 @@ p5.prototype.stroke = function(...args) {
  * erase(150, 255);
  * triangle(50, 10, 70, 50, 90, 10);
  * noErase();
+ * describe(
+ *   'purple rect centered over mint green background. Triangle in top-right is partially erased with fully erased outline'
+ * );
  * </code>
  * </div>
  *
@@ -807,14 +815,13 @@ p5.prototype.stroke = function(...args) {
  *   translate(0, 0, 40);
  *   torus(15, 5);
  *   noErase();
+ *   describe(
+ *     'teal sphere centered over yellow background. Torus rotating around sphere erases to reveal black text underneath'
+ *   );
  * }
  * </code>
  * </div>
  *
- * @alt
- * 60x60 centered pink rect, purple background. Elliptical area in top-left of rect is erased white.
- * 60x60 centered purple rect, mint green background. Triangle in top-right is partially erased with fully erased outline.
- * 60x60 centered teal sphere, yellow background. Torus rotating around sphere erases to reveal black text underneath.
  */
 p5.prototype.erase = function(opacityFill = 255, opacityStroke = 255) {
   this._renderer.erase(opacityFill, opacityStroke);
@@ -841,11 +848,12 @@ p5.prototype.erase = function(opacityFill = 255, opacityStroke = 255) {
  * ellipse(50, 50, 60);
  * noErase();
  * rect(70, 10, 10, 80);
+ * describe(
+ *   'Orange background, with two tall blue rectangles. A centered ellipse erased the first blue rect but not the second'
+ * );
  * </code>
  * </div>
  *
- * @alt
- * Orange background, with two tall blue rectangles. A centered ellipse erased the first blue rect but not the second.
  */
 
 p5.prototype.noErase = function() {
diff --git a/src/core/shape/2d_primitives.js b/src/core/shape/2d_primitives.js
index 8e5d6c7eac..ef30711df7 100644
--- a/src/core/shape/2d_primitives.js
+++ b/src/core/shape/2d_primitives.js
@@ -136,39 +136,42 @@ p5.prototype._normalizeArcAngles = (
  * arc(50, 55, 60, 60, HALF_PI, PI);
  * arc(50, 55, 70, 70, PI, PI + QUARTER_PI);
  * arc(50, 55, 80, 80, PI + QUARTER_PI, TWO_PI);
+ * describe(
+ *   'shattered outline of ellipse with a quarter of a white circle bottom-right'
+ * );
  * </code>
  * </div>
  *
  * <div>
  * <code>
  * arc(50, 50, 80, 80, 0, PI + QUARTER_PI);
+ * describe('white ellipse with top right quarter missing');
  * </code>
  * </div>
  *
  * <div>
  * <code>
  * arc(50, 50, 80, 80, 0, PI + QUARTER_PI, OPEN);
+ * describe('white ellipse with black outline with top right missing');
  * </code>
  * </div>
  *
  * <div>
  * <code>
  * arc(50, 50, 80, 80, 0, PI + QUARTER_PI, CHORD);
+ * describe('white open arc with black outline with top right missing');
  * </code>
  * </div>
  *
  * <div>
  * <code>
  * arc(50, 50, 80, 80, 0, PI + QUARTER_PI, PIE);
+ * describe(
+ *   'white ellipse with top right quarter missing with black outline around the shape'
+ * );
  * </code>
  * </div>
  *
- * @alt
- *shattered outline of an ellipse with a quarter of a white circle bottom-right.
- *white ellipse with top right quarter missing.
- *white ellipse with black outline with top right missing.
- *white ellipse with top right missing with black outline around shape.
- *white ellipse with top right quarter missing with black outline around the shape.
  */
 p5.prototype.arc = function(x, y, w, h, start, stop, mode, detail) {
   p5._validateParameters('arc', arguments);
@@ -249,11 +252,10 @@ p5.prototype.arc = function(x, y, w, h, start, stop, mode, detail) {
  * <div>
  * <code>
  * ellipse(56, 46, 55, 55);
+ * describe('white ellipse with black outline in middle of a gray canvas');
  * </code>
  * </div>
  *
- * @alt
- *white ellipse with black outline in middle-right of canvas that is 55x55
  */
 
 /**
@@ -291,11 +293,10 @@ p5.prototype.ellipse = function(x, y, w, h, detailX) {
  * <code>
  * // Draw a circle at location (30, 30) with a diameter of 20.
  * circle(30, 30, 20);
+ * describe('white circle with black outline in mid of gray canvas');
  * </code>
  * </div>
  *
- * @alt
- * white circle with black outline in mid of canvas that is 55x55.
  */
 p5.prototype.circle = function() {
   p5._validateParameters('circle', arguments);
@@ -354,6 +355,9 @@ p5.prototype._renderEllipse = function(x, y, w, h, detailX) {
  * <div>
  * <code>
  * line(30, 20, 85, 75);
+ * describe(
+ *   'a 78 pixels long line running from mid-top to bottom-right of canvas'
+ * );
  * </code>
  * </div>
  *
@@ -364,12 +368,12 @@ p5.prototype._renderEllipse = function(x, y, w, h, detailX) {
  * line(85, 20, 85, 75);
  * stroke(255);
  * line(85, 75, 30, 75);
+ * describe(
+ *   '3 lines of various stroke sizes. Form top, bottom and right sides of a square'
+ * );
  * </code>
  * </div>
  *
- * @alt
- * An example showing a line 78 pixels long running from mid-top to bottom-right of canvas.
- * An example showing 3 lines of various stroke sizes. Form top, bottom and right sides of a square.
  */
 
 /**
@@ -416,6 +420,7 @@ p5.prototype.line = function(...args) {
  * point(85, 20);
  * point(85, 75);
  * point(30, 75);
+ * describe('4 points create the corners of a square');
  * </code>
  * </div>
  *
@@ -427,6 +432,7 @@ p5.prototype.line = function(...args) {
  * strokeWeight(10); // Make the points 10 pixels in size
  * point(85, 75);
  * point(30, 75);
+ * describe('2 points and 2 large purple points in middle-right of canvas');
  * </code>
  * </div>
  *
@@ -438,13 +444,12 @@ p5.prototype.line = function(...args) {
  * point(b);
  * point(createVector(20, 10));
  * point(createVector(20, 20));
+ * describe(
+ *   'four points create vertices of 10x10 pixel square on top-left of canvas'
+ * );
  * </code>
  * </div>
  *
- * @alt
- * 4 points centered in the middle-right of the canvas.
- * 2 large points and 2 large purple points centered in the middle-right of the canvas.
- * Vertices of a square of length 10 pixels towards the top-left of the canvas.
  */
 
 /**
@@ -499,11 +504,10 @@ p5.prototype.point = function(...args) {
  * <div>
  * <code>
  * quad(38, 31, 86, 20, 69, 63, 30, 76);
+ * describe('irregular white quadrilateral with black outline');
  * </code>
  * </div>
  *
- * @alt
- *irregular white quadrilateral shape with black outline mid-right of canvas.
  */
 /**
  * @method quad
@@ -576,6 +580,7 @@ p5.prototype.quad = function(...args) {
  * <code>
  * // Draw a rectangle at location (30, 20) with a width and height of 55.
  * rect(30, 20, 55, 55);
+ * describe('white rect with black outline in mid-right of canvas');
  * </code>
  * </div>
  *
@@ -583,6 +588,9 @@ p5.prototype.quad = function(...args) {
  * <code>
  * // Draw a rectangle with rounded corners, each having a radius of 20.
  * rect(30, 20, 55, 55, 20);
+ * describe(
+ *   'white rect with black outline and round edges in mid-right of canvas'
+ * );
  * </code>
  * </div>
  *
@@ -591,13 +599,10 @@ p5.prototype.quad = function(...args) {
  * // Draw a rectangle with rounded corners having the following radii:
  * // top-left = 20, top-right = 15, bottom-right = 10, bottom-left = 5.
  * rect(30, 20, 55, 55, 20, 15, 10, 5);
+ * describe('white rect with black outline and round edges of different radii');
  * </code>
  * </div>
  *
- * @alt
- * 55x55 white rect with black outline in mid-right of canvas.
- * 55x55 white rect with black outline and rounded edges in mid-right of canvas.
- * 55x55 white rect with black outline and rounded edges of different radii.
  */
 
 /**
@@ -643,6 +648,7 @@ p5.prototype.rect = function() {
  * <code>
  * // Draw a square at location (30, 20) with a side size of 55.
  * square(30, 20, 55);
+ * describe('white square with black outline in mid-right of canvas');
  * </code>
  * </div>
  *
@@ -650,6 +656,9 @@ p5.prototype.rect = function() {
  * <code>
  * // Draw a square with rounded corners, each having a radius of 20.
  * square(30, 20, 55, 20);
+ * describe(
+ *   'white square with black outline and round edges in mid-right of canvas'
+ * );
  * </code>
  * </div>
  *
@@ -658,13 +667,10 @@ p5.prototype.rect = function() {
  * // Draw a square with rounded corners having the following radii:
  * // top-left = 20, top-right = 15, bottom-right = 10, bottom-left = 5.
  * square(30, 20, 55, 20, 15, 10, 5);
+ * describe('white square with black outline and round edges of different radii');
  * </code>
  * </div>
  *
- * @alt
- * 55x55 white square with black outline in mid-right of canvas.
- * 55x55 white square with black outline and rounded edges in mid-right of canvas.
- * 55x55 white square with black outline and rounded edges of different radii.
  */
 p5.prototype.square = function(x, y, s, tl, tr, br, bl) {
   p5._validateParameters('square', arguments);
@@ -722,11 +728,10 @@ p5.prototype._renderRect = function() {
  * <div>
  * <code>
  * triangle(30, 75, 58, 20, 86, 75);
+ * describe('white triangle with black outline in mid-right of canvas');
  * </code>
  * </div>
  *
- *@alt
- * white triangle with black outline in mid-right of canvas.
  */
 p5.prototype.triangle = function(...args) {
   p5._validateParameters('triangle', args);