About threejs-accessibility
threejs-accessibility is a skill for making Three.js experiences more accessible. It guides implementation of equivalent HTML controls, keyboard operation, reduced-motion behavior, status feedback, and accessibility testing.
Key features
- 01Accessible alternatives to canvas content
- 02Keyboard controls and visible focus
- 03Reduced-motion support and pause controls
- 04Loading, error, and device fallback states
- 05Accessibility testing guidance
Use cases
- 01Making 3D configurators operable without pointer-only input
- 02Providing text equivalents for 3D charts
- 03Supporting reduced motion in interactive scenes
- 04Checking behavior when WebGL is unavailable
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/threejs-accessibilityin Claude Code to confirm it loaded.
Details
From the project READMEAccessible 3D Experiences
Use the project's installed versions and existing architecture. These instructions supplement the user's task; they do not authorize unrelated changes or external actions.
Identify what information and actions the 3D view communicates. Decorative scenes can be hidden from assistive technology; meaningful scenes need an accessible name/description and an equivalent way to obtain essential information.
Expose meaningful actions as native HTML buttons, inputs, lists, and status text synchronized with the same application state. A canvas label alone does not make individual 3D objects accessible. For configurators, expose options and selected values outside the canvas; for charts, provide a table or textual summary.
Implement visible focus, logical tab order, keyboard alternatives for rotate/zoom/reset/select, and an escape from captured interaction. Avoid hijacking page keys when focus is outside the viewer. Pointer-only drag should have an alternative when needed to accomplish the task.
Respect prefers-reduced-motion and changes to that preference. Remove nonessential camera travel, parallax, auto-rotation, and flashing; offer stable states and pause controls. Use contrast, text labels, and shape in addition to color.
Provide useful loading, failure, and unsupported-device HTML. Announce significant state changes without announcing every frame or hover. Test with keyboard alone, browser zoom, reduced motion, a screen reader where available, and WebGL unavailable. Report untested assistive technology explicitly.
API reference
Consult the official documentation for exact signatures and revision-specific behavior. If documentation access is unavailable, inspect installed types/source and state any remaining uncertainty.