describe() & describeElement()

describe()

Examples

Example 1

describe('pink square with red heart in the bottom right corner', LABEL);
background('pink');
fill('red');
noStroke();
ellipse(66.6, 66.6, 20, 20);
ellipse(83.2, 66.6, 20, 20);
triangle(91.2, 72.6, 75, 95, 58.6, 72.6);
            		

Example 2

let x = 0;
function draw() {
  if (x > 100) {
    x = 0;
  }
  background(220);
  fill(0, 255, 0);
  ellipse(x, 50, 40, 40);
  x = x + 0.1;
  describe('green circle at x pos ' + round(x) + ' moving to the right');
}
            	

Description

Creates a screen-reader accessible description for the canvas in the DOM. The first parameter should be a string with a description of the canvas. The second parameter is optional. If specified, it determines how the description is displayed.

describe(text, LABEL) displays the description to all users as a tombstone or exhibit label/caption in a <div class="p5Label"></div> adjacent to the canvas. You can style it as you wish in your CSS.

describe(text, FALLBACK) makes the description accessible to screen-reader users only, in a sub DOM inside the canvas element. If a second parameter is not specified, by default, the description will only be available to screen-reader users.

Syntax

Parameters