PixiJS accessibility: screen reader and keyboard navigation for v8 apps
Ajouter lecteurs d'écran et navigation clavier aux apps PixiJS v8 — AccessibilitySystem, overlay shadow DOM, ordre de tabulation, ARIA
- Quoi
- Ajouter lecteurs d'écran et navigation clavier aux apps PixiJS v8 — AccessibilitySystem, overlay shadow DOM, ordre de tabulation, ARIA
- Coût
- Gratuit
- Prérequis
- une app PixiJS v8 (canvas web ou mobile) ; rien d'autre — le skill est un guide, aucun compte ni clé requis
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — le guide officiel de @pixijs pour rendre accessibles les apps canvas PixiJS v8 : l'AccessibilitySystem crée un overlay shadow-DOM invisible positionné sur les conteneurs accessibles pour que les technologies d'assistance puissent les découvrir et les activer — propriétés par conteneur (`accessible`, `accessibleTitle`, `accessibleHint`, `accessibleText`, `accessibleType`, `tabIndex`, `accessibleChildren`, `accessiblePointerEvents`), options d'init (`enabledByDefault`, `debug`, `activateOnTab`, `deactivateOnMouseMove`), ordre de tabulation personnalisé, contrôle programmatique (`setAccessibilityEnabled`, défauts statiques), et dispatch d'interactions (l'activation d'une shadow-div déclenche `click`/`pointertap`/`tap` ; le focus déclenche `mouseover`/`mouseout`). Inclut une section d'erreurs courantes : attendre l'overlay sans appui sur Tab, `accessible` sans `accessibleTitle`, la souris qui désactive l'overlay, et l'import manquant de l'extension accessibility dans les builds custom. Crédit : @pixijs. Bémols honnêtes : l'AccessibilitySystem exige le thread principal (indisponible dans un Web Worker) ; sur mobile il s'active via un crochet tactile caché ; licence MIT. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh.
Version :
Installation
Prérequis : une app PixiJS v8 (canvas web ou mobile) ; rien d'autre — le skill est un guide, aucun compte ni clé requis Installe-moi « Accessibilité PixiJS : lecteurs d'écran et navigation clavier pour apps v8 ». Donne à mon agent le skill pixijs-accessibility de @pixijs : lecteurs d'écran et navigation clavier via l'AccessibilitySystem — overlay shadow-DOM invisible, propriétés accessibles par conteneur et tabIndex, options d'init (enabledByDefault, debug, activateOnTab, deactivateOnMouseMove), contrôle programmatique, dispatch d'interactions, et la liste des erreurs courantes. Dépôt : https://github.com/pixijs/pixijs-skills/blob/main/skills/pixijs-accessibility/SKILL.md 1. Récupère le fichier SKILL.md (et les fichiers d'aide éventuels) depuis le chemin du dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Vérification de sécurité : examine le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, collecte d'identifiants). Ce dépôt ne devrait contenir aucun secret en dur, les identifiants uniquement via le coffre sécurisé, les hôtes autorisés déclarés dans le SKILL.md. Vérifie que c'est bien le cas ici ; STOP sur tout signal d'alerte et dis-le-moi. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers d'aide dans le répertoire des skills de l'agent, dans un dossier nommé « pixijs-accessibility ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (p. ex. rien — c'est un guide ; branchez les propriétés accessibles sur vos conteneurs). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne jamais l'exiger sauf s'il figure dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.