Keyboard Accessibility - 3D object focus and selection

Questions
1

Does BabylonJS offer anything similar to the IFocusable control for non-gui 3d objects? I am researching solutions for accessible keyboard interaction in our WebGL application which utilizes a combination of 2D HTML overlay UIs, in scene GUI components, and in scene interactable 3d objects.

One goal is to ensure that all primary functions triggered by user interactions in the application can be triggered by a keyboard only user. We have many interactions that currently require either mouse or touch input on the canvas element, but need a keyboard alternative.

For a simple example, in one of educational interactives, we may display a few 3D models at the same time for comparison. Using the mouse/touch, the user can select one of the model (mesh) and move it along the y axis in the scene. An accessible version of this simplified example would allow the user to ‘tab’ through the focusable elements until they have focused on the model they want to interact with. The model would of course have some sort of visual style to indicate that it is focused. The user could then press ‘enter’ or maybe ‘space’ on the keyboard to put that object into a selected state in which the user could use the arrow keys on the keyboard to move the model along the y axis in the scene.

Is there an interface or existing functionality in Babylon to create and manage this type of behavior? If not, could anyone offer ideas or insight into what an implementation of this functionality may look like in BabylonJS?

1 Like
2

We do not have such default features but I love the idea !!!

@PolygonalSun might have some feedbacks on it ???

3

I know that accessibility is one area that would be great to expand into for input. As for implementing this in your code, we don’t have any singular feature that would perform this but I could see it being implemented something like this:

First, you’d need a list of all meshes that a user can focus on. Next, you’d need to keep track of the index for the active element. Finally, you’d need something to listen for the user input and react to it.
I created a simple PG to illustrate this: https://playground.babylonjs.com/#M7K8RS#3

3 Likes
4

@PolygonalSun That is a lovely playground, thank you for sharing.

I am our in-house (and self-taught) accessibility expert, so feel free to reach out if you wanna discuss further.

1 Like