PixiJS

Class: AccessibilitySystem

AccessibilitySystem

The Accessibility system provides screen reader and keyboard navigation support for PixiJS content. It creates an accessible DOM layer over the canvas that can be controlled programmatically or through user interaction.

By default, the system activates when users press the tab key. This behavior can be customized through options:

const app = new Application({
    accessibilityOptions: {
        enabledByDefault: true,    // Enable immediately instead of waiting for tab
        activateOnTab: false,      // Disable tab key activation
        debug: false,               // Show/hide accessibility divs
        deactivateOnMouseMove: false, // Prevent accessibility from being deactivated when mouse moves
    }
});

The system can also be controlled programmatically:

app.renderer.accessibility.setAccessibilityEnabled(true);

To make individual containers accessible:

container.accessible = true;

An instance of this class is automatically created at renderer.accessibility

new AccessibilitySystem (renderer)

ts:192
Name Type Description
renderer WebGLRenderer | WebGPURenderer

A reference to the current renderer

Implements

Members

defaultOptions AccessibilitySystemOptions static

default options used by the system

Properties:
Name Type Default Description
activateOnTab boolean true

Whether to activate accessibility when tab key is pressed
deactivateOnMouseMove boolean true

Whether to deactivate accessibility when mouse moves
debug boolean false

Whether to visually show the accessibility divs for debugging
enabledByDefault boolean false

Whether to enable accessibility features on initialization

debug boolean

Whether accessibility divs are visible for debugging

Default Value:
  • false

isActive boolean readonly

Value of true if accessibility is currently active and accessibility layers are showing.

isMobileAccessibility boolean readonly

Value of true if accessibility is enabled for touch devices.

Methods

destroy () void

ts:830

Destroys the accessibility system. Removes all elements and listeners.

setAccessibilityEnabled (enabled) void

ts:847

Enables or disables the accessibility system.

Name Type Description
enabled boolean

Whether to enable or disable accessibility.