• Success Criterion 2.1.1
  • Conformance level A

Canvas or WebGL App With No Keyboard Command Layer

2.1.1 — Keyboard

Scenario

Setting

An online spreadsheet's toolbar

What’s wrong

Canvas/WebGL (3D graphics code) apps with no keyboard command layer.

Example 

canvas.addEventListener('click', (e) => {
  const {x, y} = getCanvasCoords(e);
  if (isInsideBoldButton(x, y)) applyBold();
});
// the toolbar exists only as pixels; nothing in the DOM is focusable

Why it matters

A spreadsheet user relying on a keyboard cannot reach the Bold button at all, because it is only painted pixels with nothing focusable underneath.

How to test

Tab to canvas/WebGL app controls: if there's no keyboard command layer at all for its functionality, it fails.

How to fix

A canvas element is a single opaque bitmap to assistive tech; any control drawn on it needs a real, focusable DOM counterpart.

<button id="bold-btn" onclick="applyBold()">Bold</button>
<!-- keep canvas for the grid rendering, but build the toolbar itself as real DOM controls -->
canvas.setAttribute('aria-hidden', 'true');

Outcome

A spreadsheet user reaches the Bold button by Tab and applies formatting with a single Enter press.

Who is affected

Keyboard-only users, screen reader users, and switch users cannot perceive or operate any control drawn on a canvas.

Learn more

Related scenarios