Class: AccessibilitySystem

Defined in: node_modules/pixi.js/lib/accessibility/AccessibilitySystem.d.ts:63

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: {
    // Enable immediately instead of waiting for tab
    enabledByDefault: true,
    // Disable tab key activation
    activateOnTab: false,
    // Show/hide accessibility divs
    debug: false,
    // Prevent accessibility from being deactivated when mouse moves
    deactivateOnMouseMove: false,
}
});

The system can also be controlled programmatically by accessing the renderer.accessibility property:

app.renderer.accessibility.setAccessibilityEnabled(true);

To make individual containers accessible:

container.accessible = true;

There are several properties that can be set on a Container to control its accessibility which can be found here: AccessibleOptions.

Standard

Implements

• System<AccessibilitySystemOptions>

Constructors

Constructor

> new AccessibilitySystem(renderer, _mobileInfo?): AccessibilitySystem

Defined in: node_modules/pixi.js/lib/accessibility/AccessibilitySystem.d.ts:121

Parameters

renderer

Renderer

A reference to the current renderer

_mobileInfo?

isMobileResult

Returns

AccessibilitySystem

Properties

debug

> debug: boolean

Defined in: node_modules/pixi.js/lib/accessibility/AccessibilitySystem.d.ts:85

Whether accessibility divs are visible for debugging

defaultOptions

> static defaultOptions: AccessibilityOptions

Defined in: node_modules/pixi.js/lib/accessibility/AccessibilitySystem.d.ts:83

The default options used by the system. You can set these before initializing the Application to change the default behavior.

Example

import { AccessibilitySystem } from 'pixi.js';

AccessibilitySystem.defaultOptions.enabledByDefault = true;

const app = new Application()
app.init()

Accessors

div

Get Signature

> get div(): HTMLElement

Defined in: node_modules/pixi.js/lib/accessibility/AccessibilitySystem.d.ts:143

The DOM element that will sit over the PixiJS element. This is where the div overlays will go.

Returns

HTMLElement

hookDiv

Get Signature

> get hookDiv(): HTMLElement

Defined in: node_modules/pixi.js/lib/accessibility/AccessibilitySystem.d.ts:138

Button element for handling touch hooks.

Returns

HTMLElement

isActive

Get Signature

> get isActive(): boolean

Defined in: node_modules/pixi.js/lib/accessibility/AccessibilitySystem.d.ts:127

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

Returns

boolean

isMobileAccessibility

Get Signature

> get isMobileAccessibility(): boolean

Defined in: node_modules/pixi.js/lib/accessibility/AccessibilitySystem.d.ts:133

Value of true if accessibility is enabled for touch devices.

Returns

boolean

Methods

destroy()

> destroy(): void

Defined in: node_modules/pixi.js/lib/accessibility/AccessibilitySystem.d.ts:246

Destroys the accessibility system. Removes all elements and listeners. > [!IMPORTANT] This is typically called automatically when the Application is destroyed. > A typically user should not need to call this method directly.

Returns

void

Implementation of

System.destroy

setAccessibilityEnabled()

> setAccessibilityEnabled(enabled): void

Defined in: node_modules/pixi.js/lib/accessibility/AccessibilitySystem.d.ts:256

Enables or disables the accessibility system.

Parameters

enabled

boolean

Whether to enable or disable accessibility.

Returns

void

Example

app.renderer.accessibility.setAccessibilityEnabled(true); // Enable accessibility
app.renderer.accessibility.setAccessibilityEnabled(false); // Disable accessibility