Heart and yellow circle over pink background.
| Circle: | Yellow circle in the top left corner. |
|---|---|
| Heart: | Red heart in the bottom right corner. |
describe('Heart and yellow circle over pink background', LABEL);
noStroke();
background('pink');
describeElement('Circle', 'Yellow circle in the top left corner', LABEL);
fill('yellow');
ellipse(25, 25, 40, 40);
describeElement('Heart', 'red heart in the bottom right corner', LABEL);
fill('red');
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);
This function creates a screen-reader accessible description for elements —shapes or groups of shapes that create meaning together— in the canvas sub DOM. The first paramater should be the name of the element. The second parameter should be a string with a description of the element. The third parameter is optional. If specified, it determines how the element description is displayed.
describeElement(name, text, LABEL) displays the element 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.
describeElement(name, text, FALLBACK) makes the element 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 element description will only be available to screen-reader users.
describeElement(name, text, [display])
| name | String: name of the element |
| text | String: description the element |
| display | Constant: either LABEL or FALLBACK (Optional) |