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
Decision gist · record as of 2026-06-04
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.
Use it when
- pixijs-accessibility lets you customize AccessibilitySystem behavior through its configuration options.
- pixijs-accessibility allows you to assign accessible metadata to any PixiJS container.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
pixijs/pixijs-skills/pixijs-accessibility
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 1 file
skills/pixijs-accessibility/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Enable screen reader and keyboard navigation in PixiJS applications”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
PixiJS is a high-performance 2D rendering engine built for the web. This skill collection guides agents through core PixiJS v8 concepts—from application initialization and scene management to advanced rendering techniques, custom shaders, and optimization strategies. Whether building interactive graphics or migrating from earlier versions, these skills provide structured pathways to solve rendering challenges efficiently.
Master input handling in PixiJS v8 by learning how to capture and respond to pointer, mouse, touch, and wheel events. This skill covers event binding techniques, listener management, and best practices for building responsive interactive graphics. Perfect for developers building games and applications with PixiJS's fast 2D rendering engine.
This skill teaches you how to apply and control blend modes when compositing multiple display objects in PixiJS. You'll learn which blend modes suit different visual effects, how to layer graphics with proper color mixing, and when to optimize blending for performance. Perfect for creating advanced visual effects in 2D WebGL applications.
This skill equips agents to deploy PixiJS v8 rendering outside traditional browser contexts—including Web Workers, Node.js servers, and server-side rendering pipelines. It covers environment detection, fallback strategies, and configuration patterns needed to initialize and manage the 2D graphics engine across diverse runtime targets.
Master PixiJS Application initialization and renderer configuration for fast 2D graphics across WebGL, WebGPU, and Canvas. This skill covers foundational setup, scene graph structure, sprite and graphics rendering, text display, filter effects, and performance tuning techniques. Ideal for developers building interactive web experiences with PixiJS v8.
This skill guides developers through upgrading PixiJS projects from version 7 to version 8, covering all breaking changes and API shifts. It provides a structured migration checklist and explains modern patterns for the fast WebGL-based 2D rendering engine. Perfect for teams maintaining graphics-heavy web applications.
More skills pixijs-filters (MIT) · pixijs-ticker (MIT) · pixijs-2d (MIT) · pixijs-html-source (MIT) · pixijs-scene-gif (MIT) · pixijs-create (MIT)