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

オープン
#457 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
5/5
見積もり時間
1週間以上
初心者へのやさしさ
45/100
issue の種類
機能追加
明瞭さ
おおむね明確
活発さ
活発
技術スタック
three.js, typescript

調査の方向性

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.

索引モデルが issue の本文から書いたものです。

説明

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

主要言語
TypeScript
スター
7
フォーク
2
平均マージ
1日 17時間
マージ済み PR(30日)
17

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

NanoForge-dev/Engine のほかの issue

NanoForge-dev/Engine の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。