1. Make Meshes Focusable

Individuals with visual and/or motor coordination challenges use keyboard commands to interact with web elements. This is why it is important that all interactive elements can be focusable with keyboard commands (i.e., Tab and Tab-Shift).

On a webpage, an element that is in focus is outlined by a glowing blue ring, commonly called a focus ring, that indicates to the user where the element is. Interactive HTML elements (i.e., <button>) are focusable by default while other elements (i.e., <div>) can be made focusable by adding the attribute tabIndex=0.

Interactive Three.js meshes or objects are not focusable by default. The approach that I use to make meshes focusable is by adding a CSS2DObject to the mesh and then adding the attribute tabIndex=0 to the associated DOMElement. This element is placed and resized to be a box around the mesh so that the focus ring appears to surround the mesh.

Shift-Tab to focus on different meshes

To make the above easier to implement, I wrote an npm package called a3model that lets you add focus to your meshes by simply calling the createBox function on the mesh.

2. Change Cursors on Hover

Another important visual indication of interactive elements are cursor changes. For clickable elements, upon hover, the cursor should change to a pointer to indicate that the element is clickable.

Cursor change for clickable elements on hover

One approach to do this with Three.js is to use raycasting to determine if you are hovering over the mesh and then change the document cursor to ‘pointer’ if true and ‘default’ if false. If using a3model, the cursor automatically changes on hover if you indicate that the mesh is clickable.

3. Add Roles and Descriptions

ARIA (Accessible Rich Internet Applications) allows you to add roles and descriptions to an HTML element that can be accessed by screen readers. For clickable elements, the attribute role=’button’ is commonly used to indicate to the screenreader that the element is a button. If using a3model, this role is automatically added if you indicate that the mesh is clickable. Additionally, you can specify a description for the screenreader for each mesh.