Content

This is the simplest role of all. You should think of it as the equivalent of an image alt attribute Whenever you have something in your canvas that is not simply decorative, you should use this role.

Imagine you're displaying some text with the three.js TextGeometry

A user using a screen reader would not have access to the text.

Let's say the text is 'Welcome to my website', you could simply do as below.

<A11y role="content" description="Welcome to my website">
  <Some3DComponentShowingText />
</A11y>

That's it !

Now if you inspect the dom of your app, you will see that a <p> tag has been added with your text inside. That way, user with a screenreader will be able to read that text too.

This role can also be used to serve as a step for a user to navigate your site using Tab for instance. For that you would need to add the tabIndex prop and the focusCall prop like so.

<A11y
  role="content"
  description="The second text of my site"
  tabIndex={0}
  focusCall={() => someFunction()}
>
  <SomeOther3DComponentWithText />
</A11y>

On focus, you could rotate the camera to show that second piece of text that would usually have required some scrolling to display. Use it as you please but keep in mind how it might impact the accessibility. For this example, screenreader don't trigger focus when swiping their screen so it would benefit people used to navigate through keyboard without hurting screenreader users.

It's not meant to trigger anything on click or to be activable with the Keyboard. Therefore it won't show a pointer cursor on hover.