graphics-3d: accessible DOM mirror for 3D objects

Aperta
  • Qualcosa non va?
#457 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
5/5
Tempo stimato
Più di una settimana
Idoneità per principianti
45/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
three.js, typescript
Ambito
accessibility, frontend

Direzione di ricerca

Start with docs/docs/lib-graphic-3d/index.mdx and inspect the graphics-3d package’s tick, ctx.graphics.worldToScreen, and __clear entry points. Check how components-systems defines ECS components before deciding where the API belongs. Done means an opt-in DOM mirror supports positioning, keyboard focus and activation, and cleanup, with tests and documentation covering those behaviors.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

enhancement modules:graphics-3d
Which package or utils is this feature request for?

graphics-3d

Feature

Three.js draws everything into a canvas. Screen readers and keyboard navigation (Tab, Enter) cannot reach the objects of a 3D scene, so a game made with @nanoforge-dev/graphics-3d is not accessible to blind or keyboard-only players (benchmark criterion E2, scored ❌ for Three.js).

Ideal solution or implementation

An opt-in way to mirror a 3D object as a hidden DOM element:

  • data: a label, an ARIA role (button, img…), and whether it is focusable;
  • each tick, the element is positioned over the object with ctx.graphics.worldToScreen, inside the game container (in container.ownerDocument, so pop-out keeps working);
  • focus and Enter/Space are forwarded to game code (a callback or an event);
  • the element is hidden visually but not from assistive tech, and removed on __clear.

If the API is an ECS component (e.g. Accessible3D(label, role, focusable)), it belongs in components-systems, and the library only provides the positioning helper.

Small, documented, and tested (positioning, focus, cleanup).

Alternative solutions or implementations

Babylon's @babylonjs/accessibility does the same thing with a DOM tree mirrored from the scene. We could port the idea instead of the code.

Other context

Deferred from the first version of graphics-3d. See docs/docs/lib-graphic-3d/index.mdx (E2).

Lingua principale
TypeScript
Stelle
7
Fork
2
Merge medio
1g 17h
PR unite (30g)
17

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di NanoForge-dev/Engine

Tutte le issue di NanoForge-dev/Engine

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.