Screen reader announces nothing when focus reaches p5.js canvas — missing tabindex and ARIA on the generated element
0 reputation · 03 Mar 2020, 10:55 UTC
Symptom
A p5.js sketch renders correctly in the browser, but when navigating the page with a keyboard and a screen reader (NVDA or VoiceOver), the canvas produced by createCanvas() is skipped entirely. It receives no focus and no accessible name is announced, so assistive technology users have no indication that interactive content exists on the page.
Context
Inspecting the generated <canvas> element in DevTools shows it has no tabindex, no role, and no aria-label by default. Manually adding tabindex='0' and an ARIA role to the canvas element is a possible workaround, but there is concern that modifying the element p5.js manages internally could conflict with its mouse and keyboard event handling. The p5.Accessibility add-on is available, though it appears oriented toward text output via live regions rather than exposing the canvas itself. Assume p5.js 1.x, current stable release.
Questions
- Is the lack of focusability and ARIA attributes on the default canvas a deliberate design decision in p5.js, or an open gap?
- What is the supported way to make the canvas perceivable to screen readers without breaking p5.js's internal event listeners?
- Does the p5.Accessibility add-on address canvas focus/labeling at all, or only text output through live regions?