{"enrichment":{"faq":[{"a":"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.","q":"How do I enable screen reader and keyboard navigation in PixiJS applications?"},{"a":"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.","q":"What options can I configure for the AccessibilitySystem and shadow DOM overlay?"},{"a":"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.","q":"How do I set accessible properties like title, hint, and tab order on containers?"},{"a":"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.","q":"Why is pixijs-accessibility not working and how do I troubleshoot?"},{"a":"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.","q":"How do I handle accessible interactions and keyboard events in PixiJS?"},{"a":"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.","q":"How can I make a PixiJS game accessible with screen readers and assistive technology?"}],"shadow_tags":["assistive-tech","wcag-compliance","inclusive-design","keyboard-support","shadow-dom","focus-management","screen-reader-compat","mobile-a11y"],"summary_rewrite":"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."},"files":[{"bytes":8128,"path":"skills/pixijs-accessibility/SKILL.md","sha256":"4f97542f4209ae1031361bad982fd170e47490373cf3de68a6c018b9e58149bb","url":"https://skillfed.io/files/pixijs/pixijs-skills/pixijs-accessibility/54b776c8/SKILL.md"}],"id":"pixijs/pixijs-skills/pixijs-accessibility","links":{"html":"https://skillfed.io/pixijs/pixijs-skills/pixijs-accessibility","md":"https://skillfed.io/pixijs/pixijs-skills/pixijs-accessibility.md","repo":"https://github.com/pixijs/pixijs-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":16,"language":null,"last_updated":"2026-06-04","license":"MIT","name":"pixijs-accessibility","publisher":"pixijs","stars":293},"relations":{"similar":[{"id":"pixijs/pixijs-skills/pixijs"},{"id":"pixijs/pixijs-skills/pixijs-blend-modes"},{"id":"pixijs/pixijs-skills/pixijs-environments"},{"id":"pixijs/pixijs-skills/pixijs-application"},{"id":"pixijs/pixijs-skills/pixijs-performance"},{"id":"pixijs/pixijs-skills/pixijs-migration-v8"},{"id":"pixijs/pixijs-skills/pixijs-filters"},{"id":"pixijs/pixijs-skills/pixijs-ticker"},{"id":"freshtechbro/claudedesignskills/pixijs-2d"},{"id":"pixijs/pixijs-skills/pixijs-html-source"}]},"slug":{"owner":"pixijs","repo":"pixijs-skills","skill":"pixijs-accessibility"},"version":"54b776c8"}