pixi.js
    Preparing search index...

    Class 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: {
        // 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.

    Implements

    Index

    Constructors

    constructor

    Properties

    debug defaultOptions

    Accessors

    hookDiv isActive isMobileAccessibility

    Methods

    destroy setAccessibilityEnabled

    Constructors

    Properties

    debug: boolean = false

    Whether accessibility divs are visible for debugging

    defaultOptions: AccessibilityOptions = ...

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

    import { AccessibilitySystem } from 'pixi.js';

    AccessibilitySystem.defaultOptions.enabledByDefault = true;

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

    Accessors

    • get hookDiv(): HTMLElement

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

      Returns HTMLElement

    • get isActive(): boolean

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

      Returns boolean

    • get isMobileAccessibility(): boolean

      Value of true if accessibility is enabled for touch devices.

      Returns boolean

    Methods

    • 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

    • Enables or disables the accessibility system.

      Parameters

      • enabled: boolean

        Whether to enable or disable accessibility.

      Returns void

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

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods