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

    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