Interface: AccessibleOptions

Defined in: node_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:20

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

Example

const container = new Container();
container.accessible = true;
container.accessibleTitle = 'My Container';
container.accessibleHint = 'This is a container';
container.tabIndex = 0;

Standard

Properties

accessible

> accessible: boolean

Defined in: node_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:31

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

Default

false

Example

const container = new Container();
container.accessible = true;

accessibleChildren

> accessibleChildren: boolean

Defined in: node_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:126

Setting to false will prevent any children inside this container to be accessible. Defaults to true.

Default

true

Example

const container = new Container();
container.accessible = true;
container.accessibleChildren = false; // This will prevent any children from being accessible

const sprite = new Sprite(texture);
sprite.accessible = true; // This will not work since accessibleChildren is false

accessibleHint

> accessibleHint: string | null

Defined in: node_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:56

Sets the aria-label attribute of the shadow div

Default

null

Advanced

Example

const container = new Container();
container.accessible = true;
container.accessibleHint = 'This is a container';

accessiblePointerEvents

> accessiblePointerEvents: PointerEvents

Defined in: node_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:100

Specify the pointer-events the accessible div will use Defaults to auto.

Default

'auto'

Advanced

Example

const container = new Container();
container.accessible = true;
container.accessiblePointerEvents = 'none'; // or 'auto', 'visiblePainted', etc.

accessibleText

> accessibleText: string | null

Defined in: node_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:111

Sets the text content of the shadow

Default

null

Example

const container = new Container();
container.accessible = true;
container.accessibleText = 'This is a container';

accessibleTitle

> accessibleTitle: string | null

Defined in: node_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:44

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

Default

null

Example

const container = new Container();
container.accessible = true;
container.accessibleTitle = 'My Container';

accessibleType

> accessibleType: keyof HTMLElementTagNameMap

Defined in: node_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:86

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

Default

'button'

Advanced

Example

const container = new Container();
container.accessible = true;
container.accessibleType = 'button'; // or 'link', 'checkbox', etc.

tabIndex

> tabIndex: number

Defined in: node_modules/pixi.js/lib/accessibility/accessibilityTarget.d.ts:72

Sets the tabIndex of the shadow div. You can use this to set the order of the elements when using the tab key to navigate.

Default

0

Example

const container = new Container();
container.accessible = true;
container.tabIndex = 0;

const sprite = new Sprite(texture);
sprite.accessible = true;
sprite.tabIndex = 1;