a3: Accessibility for Three.js models

a3 aims to improve the accessibility of Three.js models by offering keyboard navigation for hover and click events, focus indication on meshes/objects, mobile touch events, cursor updates, and roles/descriptions for screen readers.

Installation

npm install a3model 

Documentation

import A3 from 'a3model'
import 'a3model/src/index.css';

Wrap the canvas element with a div element, as shown below.

<div id='a3canvas'><canvas id='webgl'></canvas></div>

Initialize the A3 object with the canvas DOMElement, renderer, a3canvas DOMElement and renderer size.

const canvas = document.querySelector('canvas.webgl')
const renderer = new THREE.WebGLRenderer({canvas: canvas})
const a3canvas = document.getElementbyID('a3canvas')
const sizes = {
    'width': window.innerWidth,
    'height': window.innerHeight
}
const mya3 = new A3(canvas, renderer, a3canvas, sizes);

For every mesh or object that you want to make focusable, call createBox. It is important that you provide an unique name for each of these meshes. You can specify a role for the mesh, such as "button".

mesh.name = 'uniqueName'
mesh = mya3.createBox(mesh, role=null)

Click Events

To click on a mesh with a keyboard, tab to the mesh and press 'Enter'. Upon hover over with a mouse, the cursor will change from 'default' to 'pointer'. All click events are translated to touch events on mobile devices.

For every click event in your model, identify the mesh name, the function that will be called during the click event, and a description for the screen reader.

mya3.click(meshname, function, description)

For the function, use the functWrapper function to wrap the function and its arguments.

function = mya3.functWrapper(funct, ...args)

Hover Events

To hover on a mesh with a keyboard, press 'Tab'. Similar to the click event, specify the mesh name, function called during the hover event, and description for the screen reader.

mya3.hover(meshname, function, description)

Update Focus Boxes on Camera Change

For any change to the camera orientation, call updateBoxes to update the focus boxes.

mya3.updateBoxes(camera)

Render

If you specified any click or hover events, call renderEffects.

mya3.renderEffects(camera)

In your animation loop, call render.

mya3.render(scene, camera)

Remove Mesh

When you remove a mesh from the scene, remove the corresponding DOM element.

scene.remove(mesh)
mya3.remove(mesh)