PixiJS

Namespace: accessibility

accessibility

The accessibility module provides screen reader and keyboard navigation support for PixiJS content. This is very important as it can possibly help people with disabilities access PixiJS content.

This module is a mixin for AbstractRenderer and needs to be imported if managing your own renderer:

import 'pixi.js/accessibility';

Make objects accessible by setting their properties:

container.accessible = true;        // Enable accessibility for this container
container.accessibleType = 'button' // Type of DOM element to create (default: 'button')
container.accessibleTitle = 'Play'  // Optional: Add screen reader labels

By default, the accessibility system activates when users press the tab key. For cases where you need control over when accessibility features are active, configuration options are available:

const app = new Application({
    accessibilityOptions: {
        enabledByDefault: true,    // Create accessibility elements immediately
        activateOnTab: false,      // Prevent tab key activation
        debug: false,               // Show accessibility divs
        deactivateOnMouseMove: false, // Prevent accessibility from being deactivated when mouse moves
    }
});

The system can also be controlled programmatically:

app.renderer.accessibility.setAccessibilityEnabled(true);

See AccessibleOptions for all configuration options.

Classes

AccessibilitySystem

Interface Definitions

AccessibleOptions

When accessible is enabled on any display object, these properties will affect its accessibility.

Properties:
Name Type Default Description
accessible boolean false

Flag for if the object is accessible. If true AccessibilityManager will overlay a shadow div with attributes set
accessibleChildren boolean true

Setting to false will prevent any children inside this container to be accessible. Defaults to true.
accessibleHint string | null

Sets the aria-label attribute of the shadow div
accessibleText string | null

Sets the text content of the shadow div
accessibleTitle string

Sets the title attribute of the shadow div If accessibleTitle AND accessibleHint has not been this will default to 'container [tabIndex]'
accessibleType keyof 'button'

Specify the type of div the accessible layer is. Screen readers treat the element differently depending on this type. Defaults to button.
tabIndex number 0

Type Definitions

PointerEvents

ts:3

The type of the pointer event to listen for. Can be any of the following:

  • auto
  • none
  • visiblePainted
  • visibleFill
  • visibleStroke
  • visible
  • painted
  • fill
  • stroke
  • all
  • inherit
See: