Accessibility support

Questions
1

I’m trying to make the scene more accessible, I found this good playground about how to make mesh keyboard accessible, but is there any way we can add something like aria-label to the mesh? And also I see the tab is stuck in the scene, is there any way can make the tab focus on the html page again Tab/Select Demo | Babylon.js Playground (babylonjs.com)

If the mesh can’t be accessible, do I have to use HTML instead? How about accessibility with html gui? Can it be detected by screen reader and using tab?

Updated question:
Is there any way that when we use keyboard to select the dom element on the scene, then it can mirror this behavior to certain 3d object?

2

@pigga as far as I know there’s no way to do what you’re asking. You can add tags to meshes but not aria labels, and even if you could, browsers and screen reading software aren’t built to traverse a 3D scene to look for such labels.

You might be able to hack something together that created a sort of shadow or duplicate invisible DOM for the 3D scene, with aria labels, but I know of nothing existing.

Tab focus is more an HTML question. By default you should be able to tab focus on the canvas element, but no deeper than that.

1 Like
3

Could you explain why have duplicate invisible DOM for the 3D scene won’t work?

4

@PolygonalSun is the author of the Tab/Select demo so maybe he can throw some ideas here :smiley:

We talk about accessibility here sometimes, it’s definitely something that would be amazing to expand on! I also really enjoy @labris 's demo using the Web Speech API: Convert Mesh Names to Synthesized Voice with Web Speech API - Demos and projects - Babylon.js (babylonjs.com)

2 Likes
5

I said it could work, but it would be a hack, likely a lot of work for questionable benefit, and unsure if it’d actually improve accessibility for people or not.

6

Not sure if you’re familiar with the html gui, if that accessible by screen reader? the main problem I have just using html is it can’t be tracked by camera on the scene

7

Anything made with HTML, including a GUI overlaid atop your 3D scene, can be made accessible, although accessibility is a big topic on its own.

2 Likes
8

I take a look at this example about html gui, I think this is just a html overlay the scene, it can’t be detected in inspector Simple HTML GUI | Babylon.js Playground (babylonjs.com), I guess this is the only to way to make it fully accessible :sob:

9

Yeah, it can’t be detected by the Babylon Inspector because it is an external HTML element, but you can use your browser’s inspection tools instead in this case :smiley:

10

Hello @pigga just checking in, do you have any further questions on this?

11

I just chose one answers to be solution, thank you, that’s all my question for this topic

2 Likes