pixi-accessibility

Enable screen reader and keyboard navigation via PixiJS's AccessibilitySystem. The system creates an invisible shadow DOM overlay positioned over accessible containers so assistive technology can discover and activate them.

Quick Start

const button = new Sprite(await Assets.load("button.png"));
button.accessible = true;
button.accessibleTitle = "Play game";
button.accessibleHint = "Starts a new game session";
button.eventMode = "static";
button.tabIndex = 0;
app.stage.addChild(button);

app.renderer.accessibility.setAccessibilityEnabled(true);

button.on("pointertap", () => startGame());

Related skills: pixijs-events (pointer/tap handlers), pixijs-scene-dom-container (HTML elements on canvas), pixijs-application (init options).

Key points:

• By default the system activates only after the user presses Tab. Set enabledByDefault: true in Application init for immediate activation.
• On mobile, the system creates a hidden touch hook; screen-reader focus activates accessibility for the whole session.
• The AccessibilitySystem requires the main thread; it is not available in a Web Worker.

Core Patterns

Container accessible properties

import { Container, Sprite } from "pixi.js";

const container = new Container();
container.accessible = true;
container.accessibleTitle = "Navigation menu";
container.accessibleHint = "Contains links to other pages";
container.eventMode = "static"; // required for custom tabIndex to apply
container.tabIndex = 0;
container.accessibleType = "div"; // defaults to 'button'

const sprite = new Sprite();
sprite.accessible = true;
sprite.accessibleTitle = "Close dialog";
sprite.accessibleText = "X"; // text content of the shadow div
sprite.eventMode = "static";
sprite.tabIndex = 1;

Available properties on any Container:

• accessible (boolean) - enables the accessible overlay div
• accessibleTitle (string) - sets the title attribute on the shadow div
• accessibleHint (string) - sets the aria-label attribute
• accessibleText (string) - sets inner text content of the shadow div
• accessibleType (string) - HTML tag for the shadow element, defaults to 'button'
• tabIndex (number) - tab order for keyboard navigation (only applied when interactive is true / eventMode is 'static' or 'dynamic')
• accessibleChildren (boolean, default true) - when false, prevents child containers from being accessible
• accessiblePointerEvents (string) - CSS pointer-events value on the shadow div