Accessibility
A chart that is only a picture tells a sighted reader something and tells everyone else nothing. p5loom gives every picture a text alternative built from the spec, and holds its colours to contrast ratios.
What the library does
- Role and label. The canvas gets
role="img"and anaria-labelthat is the picture's description, for example "Visualization 640 by 400 pixels, light theme: 1 line element, 1 scatter element, 12 generated dots." - Visible-to-screen-readers caption. The same description is also placed in a
figcaptionthat is hidden from sight but read by assistive technology, so readers that skip images still get it. - Counts, not claims. The description says what is drawn. It does not say what it means. Describing the meaning of data is your job, because only you know what the data is.
- Contrast. Body text is held to 4.5:1 and graphics to 3:1 in both themes. See the measured ratios.
- Motion. Pictures are drawn once. Nothing animates, so there is nothing to pause for reduced-motion users. The site also honours the reduced-motion setting for its own transitions.
- Resolution. The canvas is drawn at up to 2x device pixel density, so lines stay sharp on high-density screens without costing a 4x canvas.
What you still need to do
- Put the important numbers in the page text, next to the picture. A description of counts is not a data table.
- Give the figure a heading that says what it is about, and a sentence that says what to notice.
- If a picture carries information only in colour, add a second cue: a label, a pattern or a shape. The library gives you two colours that are distinct from each other, not a legend.
- Test your page with a screen reader before you ship it. The library's text alternatives are checked by tests; how they read aloud in your layout is not.
Keyboard
The site and the playground are fully keyboard operable. Every control is a real button, link or field, and focus is visible. The playground's editor is a plain text area, so standard editing keys work.