pixijs-accessibility

Implement screen reader and keyboard navigation support for PixiJS v8 applications.

2|2|Updated May 1, 2026

Search Tags:#accessibility #screen reader #keyboard navigation #web accessibility #pixijs #assistive tech #DOM overlay

Ready to run

npx skills add https://github.com/adamhjk/mvtt --skill pixijs-accessibility-adamhjk

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: pixijs-accessibility
Source: https://github.com/adamhjk/mvtt/tree/main/.agents/skills/pixijs-accessibility
Command: npx skills add https://github.com/adamhjk/mvtt --skill pixijs-accessibility-adamhjk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Enables screen reader and keyboard navigation features in PixiJS v8 applications to improve accessibility for assistive technology users.

Core Features & Use Cases

Accessible Containers: Adds properties such as accessibleTitle, accessibleHint, and tabIndex to create interactive, navigable UI elements.
Shadow DOM Overlay: Creates an invisible overlay for assistive tech to discover and activate scene items.
Activation & Control: Supports toggling activation states, managing focus, and handling interaction events for accessible elements.

Quick Start

Enable accessibility in a PixiJS application by setting setAccessibilityEnabled(true), then assign accessible properties to containers and sprites as needed.

Frequently Asked Questions about pixijs-accessibility

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

FAQPage Schema

How do I add screen reader support to a PixiJS canvas application?▼

To add screen reader support to a PixiJS canvas application, enable the feature and assign text properties. Set setAccessibilityEnabled(true), then assign accessibleTitle and accessibleHint to containers so assistive technologies can discover them.

How does keyboard navigation work with PixiJS sprites and containers?▼

Keyboard navigation works with PixiJS sprites by using a shadow DOM overlay and tabIndex properties. This creates invisible interactive elements over the canvas, allowing users to focus and activate scene items via keyboard input.

Does PixiJS v8 have built-in web accessibility features for assistive tech?▼

Yes, PixiJS v8 supports web accessibility features for assistive tech through a dedicated overlay system. It creates an invisible shadow DOM overlay that assistive technologies can discover and interact with directly.

How do I make interactive canvas elements accessible to screen readers?▼

To make interactive canvas elements accessible to screen readers, assign accessibility properties like accessibleTitle and accessibleHint to your PixiJS containers. This links the visual scene items to the underlying DOM overlay.

What is the best way to manage focus and activation states for accessible UI elements?▼

To manage focus and activation states for accessible UI elements, use the built-in interaction handling provided by the accessibility overlay. It supports toggling activation states and managing focus events for your configured scene items.