skills.rest
pixijs
pixijsOFFICIAL
Explore all skills by this author →
Website𝕏@PixiJSGitHub

pixijs-accessibility

Enable screen reader and keyboard navigation for PixiJS v8 apps.

302|15|Updated Apr 1, 2026
Search Tags:#accessibility#a11y#screen-reader#shadow-dom#keyboard-navigation#pixijs#mobile-activation
One-click install
npx skills add https://github.com/pixijs/pixijs-skills --skill pixijs-accessibility
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pixijs-accessibility
Source: https://github.com/pixijs/pixijs-skills/tree/main/skills/pixijs-accessibility
Command: npx skills add https://github.com/pixijs/pixijs-skills --skill pixijs-accessibility

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enables screen reader and keyboard navigation for PixiJS v8 apps via the AccessibilitySystem, providing a shadow DOM overlay and mobile activation hooks to make canvas content accessible to assistive tech.

Core Features & Use Cases

  • AccessibilitySystem integration: enableByDefault, debug, activateOnTab, deactivateOnMouseMove
  • Per-container accessibility properties: accessible, accessibleTitle, accessibleHint, tabIndex, accessibleText, accessibleType
  • Shadow DOM overlay and mobile activation to expose interactive elements to screen readers
  • Use cases include navigating game menus, UI panels, and in-game controls with accessible focus and tab order

Quick Start

Enable the AccessibilitySystem on your App and mark objects with accessible = true and provide accessibleTitle and accessibleHint.

Frequently Asked Questions about pixijs-accessibility

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make PixiJS canvas content accessible to screen readers?▼

Make PixiJS canvas content accessible to screen readers by enabling the AccessibilitySystem on your App and setting accessible = true on target objects to generate a shadow DOM overlay.

How do I configure tab order for keyboard navigation in a PixiJS v8 app?▼

Configure keyboard navigation in a PixiJS v8 app by setting the tabIndex property on display objects and using the activateOnTab option to manage focus order through the AccessibilitySystem.

Does PixiJS v8 accessibility support mobile activation for interactive elements?▼

Yes, PixiJS v8 accessibility supports mobile activation by providing hooks within the AccessibilitySystem that expose interactive canvas elements to assistive technologies on mobile devices.

What properties are available for screen reader announcements in PixiJS?▼

Available screen reader properties in PixiJS include accessibleTitle, accessibleHint, accessibleText, and accessibleType, which define semantic labels and roles for canvas objects in the shadow DOM overlay.

Do I need Shadow DOM support to use the PixiJS AccessibilitySystem?▼

Yes, you need a modern browser with Shadow DOM support to use the PixiJS AccessibilitySystem, because it relies on a shadow DOM overlay to expose interactive UI elements to assistive technology.

How can I debug keyboard navigation and screen reader focus in PixiJS?▼

Debug screen reader focus and keyboard navigation in PixiJS by enabling the debug option within the AccessibilitySystem configuration to visualize the shadow DOM overlay and tab order during development.

Related Skills

Explore More Software Engineering Skills→
alexkaferalexkafer

pixijs-accessibility

Add screen-reader and keyboard accessibility to PixiJS v8 canvas interfaces.

Community
Intermediate
matthewharwoodmatthewharwood
1

pixijs-accessibility

Add screen reader and keyboard navigation support to PixiJS v8 apps.

Community
Intermediate
pixijspixijs
302

pixijs-scene-dom-container

Overlay HTML elements on a PixiJS canvas and synchronize them with scene graph transforms.

Official
Intermediate
HDeiblerHDeibler
6

accessibility-robust

Audit UI markup for semantic HTML and correct ARIA usage.

Community
Intermediate