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

Ouverte
  • Quelque chose ne va pas ?
#457 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
5/5
Temps estimé
Plus d'une semaine
Accessibilité débutants
45/100
Type d'issue
Fonctionnalité
Clarté
Plutôt claire
Activité
Active
Stack technique
three.js, typescript
Domaine
accessibility, frontend

Piste de recherche

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.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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).

Langage dominant
TypeScript
Étoiles
7
Forks
2
Merge moyen
1 j 17 h
PR mergées (30 j)
17

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de NanoForge-dev/Engine

Toutes les issues de NanoForge-dev/Engine

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.