Content

This page will tell you all you need to know about making your content accessible in your react-three-fiber app with @react-three-a11y

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.

Note

For people using screen readers it will also sync some kind of focus indicator natively where your text is so people so screen readers users will know where they're currently in your page.

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.

Edit this page