Use this skill when adding screen reader and keyboard navigation to PixiJS v8 apps. Covers AccessibilitySystem options (enabledByDefault, debug, activateOnTab, deactivateOnMouseMove), per-container accessibility properties, shadow DOM overlay, mobile touch-hook activation. Triggers on: 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 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 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 Custom tab order Give each accessible container a tabIndex to control the order assistive tech walks through them. Higher numbers come later; equal numbers fall back to scene graph order. tabIndex is only forwarded to the shadow div when the container is interactive ( eventMode is 'static' or 'dynamic' ). Without that, the system clamps the div's tabIndex back to 0 , and the order you set is ignored. Programmatic control The system can also be configured via static defaults before creating the Application: Handling accessible interactions When accessibility is active and a user activates a shadow div (via Enter/Space key or screen reader action), the system dispatches click , pointertap , and tap FederatedEvents to the corresponding container. Focus on the shadow div dispatches mouseover , and focus out dispatches mouseout . Both eventMode and accessible should be set for full keyboard + pointer support. Common Mistakes [MEDIUM] Expecting accessibility to be active without Tab key press The AccessibilitySystem does not create its DOM overlay until the user presses Tab (or, on mobile, focuses the touch hook). If your application needs accessibility immediately: Or at runtime: Without one of these, automated accessibility testing tools will not find the overlay elements. [MEDIUM] Setting accessible without accessibleTitle Wrong: Correct: A container with accessible = true but no accessibleTitle or accessibleHint gets a fallback title of "container {tabIndex}" . Screen readers will announce this generic label with no useful context. Always provide at least accessibleTitle . [MEDIUM] Accessibility deactivates when moving mouse By default, deactivateOnMouseMove is true . Any mouse movement after Tab activation will deactivate the overlay. This is by design (assumes keyboard only users don't use a mouse), but it makes testing with a mouse frustrating. [MEDIUM] Not importing accessibility extension in custom builds When using skipExtensionImports: true for a custom build, the accessibility extension is not automatically registered. You must import it explicitly: Without this import, app.renderer.accessibility will be undefined and no shadow DOM layer will be created. API Reference [AccessibilitySystem](https://pixijs.download/release/docs/accessibility.AccessibilitySystem.html.md) [AccessibilitySystemOptions](https://pixijs.download/release/docs/accessibility.AccessibilitySystemOptions.html.md) [AccessibilityOptions](https://pixijs.download/release/docs/accessibility.AccessibilityOptions.html.md) [AccessibleOptions](https://pixijs.download/release/docs/accessibility.AccessibleOptions.html.md) [PointerEvents](https://pixijs.download/release/docs/accessibility.PointerEvents.html.md)

pixijs-accessibility