Screen reader announces nothing when focus reaches p5.js canvas — missing tabindex and ARIA on the generated element

Answer

The default createCanvas() element is not focusable and has no accessible name, so screen readers skip it. This is not an intentional accessibility feature; it is a known gap that you can fix without interfering with p5.js’s internal mouse or keyboard handling.

Likely explanation

p5.js treats the canvas as a pure graphics surface and relies on mouse/touch events. It therefore does not add tabindex, role, or aria-label by default.

Confirmed facts

• The canvas element receives no focus and is not announced by NVDA or VoiceOver.
• Adding tabindex='0' (or -1 for script‑only focus) and an aria-label or aria-labelledby does not stop p5.js from forwarding mouse and key events.
• The p5.Accessibility add‑on provides live‑region helpers for text/audio output but does not automatically add tabindex or ARIA to the canvas itself.

Steps to make the canvas perceivable

1. After calling createCanvas(), obtain the canvas element, e.g., const cnv = document.querySelector('canvas');
2. Set tabindex='0' so it can receive keyboard focus via Tab.
3. Provide an accessible name, for example cnv.setAttribute('aria-label', 'My p5 sketch');.
4. Test: press Tab to move focus to the canvas and verify that NVDA/VoiceOver announces the label. Then press a key and confirm that keyPressed() still fires.

Alternative: wrapper container

If you prefer not to modify the canvas directly, wrap it in a focusable div:

<div tabindex='0' role='application' aria-label='p5 sketch'>
  <!-- p5.js will draw into the inner canvas -->
</div>

The container receives focus and the label; the inner canvas remains unchanged and continues to receive p5.js events.

Missing diagnostic detail

Do you need the canvas itself to receive keyboard focus for interaction (e.g., drawing with keys), or is announcing its presence sufficient? This determines whether you should use tabindex='0' (focusable) or tabindex='-1' (script‑only) and whether a wrapper with role='application' is appropriate.