Accessibility package confusion in the docs

We do the es6 bundles / treeshaking and just trying to get our heads around how to use the accessibility package.

Is it supposed to be listed here? Obtaining Babylon.js Packages | Babylon.js Documentation (babylonjs.com)

cc @carolhmj and @RaananW

Yep! would make sense to add them there :slight_smile:

The package for es6 is @babylonjs/accessibility. npm is currrently down, otherwise i would give you a direct link to it. The docs - Accessibility Scene Tree for Screen Readers | Babylon.js Documentation should work with this package as well (without the global BABYLON namespace) .

CC @carolhmj for updating the docs

Thanks @RaananW ! Another question I had was how to get this to work heh. To my understanding it seems like this creates another div in the body, after the Babylon canvas, but I wasn’t able to see this div in the elements console when I went to the first doc example https://playground.babylonjs.com/#C9GZTF#11

Am I looking in the wrong place?

Should be there as a child of the canvas:

image

If you don’t see it we need to check why

Ah okay @RaananW , I may have just been confused a bit by the wording of the docs , which say “This will generate a <div id="accessibility-host"> HTML element right after the Babylon.js scene’s canvas element.”

I expected that new div to be a sibling div of the canvas div element and not a child div. So I was looking after the canvas element, not inside of it!

I think I’m all good now. I might recommend finessing the language of that but maybe in the only one who misread it. Appreciate the help as always!

1 Like

That’s perfect feedback, and I totally agree with you. We will adjust the docs to make sure it is clearer

2 Likes

@RaananW and @carolhmj , while on this topic I’ve got another request heh.

In Frame, a lot of our UI is doubled up in both babylon and Vue. We need the UI in babylon so that it can render in VR, but for desktop we rely on the UI built with Vue. This Vue UI already has solid screen reader support.

So, our main use case for the twin renderer is actually to let people but accessibility tags on some GUI elements, like when they put text assets in their Frame, or if they want to put accessibility tags on images or 3d models.

The way the accessibility stuff is set up, though, it appears that all the babylon gui items will get nodes created in the twinrenderer by default. It would be nice if I could turn that off and only selectively set up accessibility tags only for the nodes/gui items that I want the tags for.

Am I right in thinking that’s not currently possible?

You are totally right. With GUI it is not possible (but very possible with regular nodes).
Any GUI element that is visible will get its twin HTML element. We can extend the functionality if it makes sense to your use case

That would be awesome @RaananW

1 Like

Created an issue for it! [Screen Reader Support] Allow user to select which GUI Controls will be rendered in the Twin Tree · Issue #13865 · BabylonJS/Babylon.js (github.com)

2 Likes