p5.js icon indicating copy to clipboard operation
p5.js copied to clipboard

Use describe() to create accessible canvas descriptions in inline documentation

Open lm-n opened this issue 4 years ago • 0 comments
trafficstars

How would this new feature help increase access to p5.js?

This change from using @alt to using describe() in inline documentation will help model best practices for making p5.js sketches accessible to screen reader users. While @alt creates an extra <span> element after the canvas with the canvas description, describe() follows best accessibility practices (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) by making the description a fallback text or sub DOM of the <canvas> html element.

Most appropriate sub-area of p5.js?

  • [x] Accessibility (Web Accessibility)
  • [ ] Build tools and processes
  • [ ] Color
  • [ ] Core/Environment/Rendering
  • [ ] Data
  • [ ] DOM
  • [ ] Events
  • [ ] Friendly error system
  • [ ] Image
  • [ ] IO (Input/Output)
  • [ ] Localization
  • [ ] Math
  • [ ] Unit Testing
  • [ ] Typography
  • [ ] Utilities
  • [ ] WebGL
  • [ ] Other (specify if possible)

Feature enhancement details:

  • [x] Update EN Contributor Docs Update documentation:
  • [ ] Color Creating and Reading examples
  • [x] Color Setting examples
  • [x] Shape 2D primitives examples
  • [ ] Shape Attributes examples
  • [ ] Shape Curves examples
  • [ ] Shape Vertex examples
  • [ ] Shape 3D primitives examples
  • [ ] Shape 3D models examples
  • [ ] Constants examples
  • [ ] Environment examples
  • [ ] Structure examples
  • [ ] DOM examples
  • [ ] Rendering examples
  • [ ] Foundation examples
  • [ ] Transform examples
  • [ ] Data Local Storage examples
  • [ ] Data Dictionary examples
  • [ ] Data Array Function examples
  • [ ] Data Conversion examples
  • [ ] Data String Functions examples
  • [ ] Events Acceleration examples
  • [ ] Events Keyboard examples
  • [ ] Events Mouse examples
  • [ ] Events Touch examples
  • [ ] Image examples
  • [ ] Image Loading and displaying pixels examples
  • [ ] IO (Input) examples
  • [ ] IO (Output) examples
  • [ ] IO Table examples
  • [ ] IO Time and Date examples
  • [ ] Math Calculation examples
  • [ ] Math Vector examples
  • [ ] Math Noise examples
  • [ ] Math Random examples
  • [ ] Math Trigonometry examples
  • [ ] Typography Attributes examples
  • [ ] Typography Loading and Display examples
  • [ ] Lights Camera - Interaction examples
  • [ ] Lights Camera - Lights examples
  • [ ] Lights Camera - Material examples
  • [ ] Lights Camera - Camera examples

lm-n avatar Mar 29 '21 12:03 lm-n