pixijs-accessibility
This skill equips developers to build inclusive PixiJS applications by implementing screen reader compatibility and keyboard-driven interaction patterns. Master the accessibility layer for PixiJS v8's 2D rendering engine, ensuring your interactive graphics reach users with assistive technologies.
pixijs-accessibility enables screen reader support and keyboard navigation by activating PixiJS's built-in AccessibilitySystem. Call `app.accessibility.activate()` to enable the accessibility layer, which creates a shadow DOM overlay that mirrors your interactive elements. This allows screen readers to announce content and keyboard users to navigate via Tab and arrow keys. The system works with PixiJS v8's 2D rendering engine to ensure assistive technologies can interact with your canvas-based application.
AI-generated summary based on this skill's SKILL.md
Install
pixijs/pixijs-skills/pixijs-accessibility
git clone https://github.com/pixijs/pixijs-skills
cp -r pixijs-skills/skills/pixijs-accessibility ~/.claude/skills/pixijs-accessibilityFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I enable screen reader and keyboard navigation in PixiJS applications?
pixijs-accessibility enables screen reader support and keyboard navigation by activating PixiJS's built-in AccessibilitySystem. Call `app.accessibility.activate()` to enable the accessibility layer, which creates a shadow DOM overlay that mirrors your interactive elements. This allows screen readers to announce content and keyboard users to navigate via Tab and arrow keys. The system works with PixiJS v8's 2D rendering engine to ensure assistive technologies can interact with your canvas-based application.
What options can I configure for the AccessibilitySystem and shadow DOM overlay?
pixijs-accessibility lets you customize AccessibilitySystem behavior through its configuration options. You can control shadow DOM overlay rendering, adjust how the accessibility layer responds to user input, and fine-tune keyboard event handling. Key settings include enabling/disabling the overlay, managing focus behavior, and configuring how mouse and touch interactions map to accessible events. Consult the AccessibilitySystem API to see all available options for your specific PixiJS version.
How do I set accessible properties like title, hint, and tab order on containers?
pixijs-accessibility allows you to assign accessible metadata to any PixiJS container. Set the `accessible` property to true, then configure `accessibleTitle` for screen reader labels, `accessibleHint` for additional context, and `tabIndex` to control keyboard focus order. These properties ensure your interactive graphics are properly announced and navigable. Use the `accessibleChildren` property to define which child elements participate in the accessibility tree.
Why is pixijs-accessibility not working and how do I troubleshoot?
pixijs-accessibility may fail to activate if the accessibility system hasn't been explicitly enabled or if your event mode is incompatible. Verify that `app.accessibility.activate()` has been called and that interactive containers have `eventMode` set to 'static' or 'dynamic' rather than 'none'. Check browser console for errors, ensure your PixiJS version supports accessibility, and confirm that screen reader or keyboard input is actually being tested. Deactivate with `app.accessibility.deactivate()` if needed to reset the system.
How do I handle accessible interactions and keyboard events in PixiJS?
pixijs-accessibility bridges keyboard and screen reader events to your PixiJS containers. Listen for standard keyboard events (keydown, keyup) and pointer events on accessible elements; the system translates these into PixiJS event handlers. Use `eventMode` to control which containers receive events, and bind handlers to your interactive objects. The accessibility layer ensures that both keyboard and mouse users can trigger the same interactions, creating an inclusive experience for all users.
How can I make a PixiJS game accessible with screen readers and assistive technology?
pixijs-accessibility equips you to build inclusive PixiJS games by combining screen reader support, keyboard navigation, and ARIA labels. Activate the accessibility system, mark interactive game elements as accessible containers with meaningful titles and hints, set logical tab order, and handle both keyboard and pointer events uniformly. Test with actual screen readers and keyboard-only navigation to verify your game reaches users with assistive technologies. The MIT-licensed skill provides the foundation for accessible 2D graphics in PixiJS v8.
SKILL.md
rendered from the published skill — quoted content, verbatim
Enable screen reader and keyboard navigation via PixiJS's AccessibilitySystem. The system creates an invisible shadow DOM overlay positioned over accessible containers so assistive technology can discover and activate them.
Quick Start
const button = new Sprite(await Assets.load("button.png"));
button.accessible = true;
button.accessibleTitle = "Play game";
button.accessibleHint = "Starts a new game session";
button.eventMode = "static";
button.tabIndex = 0;
app.stage.addChild(button);
app.renderer.accessibility.setAccessibilityEnabled(true);
button.on("pointertap", () => startGame());
Related skills: pixijs-events (pointer/tap handlers),
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
skills/pixijs-accessibility/SKILL.md