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

`c
import A3 from 'a3model'
import 'a3model/src/index.css';
`
Wrap the canvas element with a div element, as shown below.
`c

`
Initialize the A3 object with the canvas DOMElement, renderer, a3canvas DOMElement and renderer size.
`c
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".
`c
mesh.name = 'uniqueName'
mesh = mya3.createBox(mesh, role=null)
`

$3

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.
`c
mya3.click(meshname, function, description)
`
For the function, use the functWrapper function to wrap the function and its arguments.
`c
function = mya3.functWrapper(funct, ...args)
`

$3


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.
`c
mya3.hover(meshname, function, description)
`

$3

For any change to the camera orientation, call updateBoxes to update the focus boxes.
`c
mya3.updateBoxes(camera)
`

$3

If you specified any click or hover events, call renderEffects.
`c
mya3.renderEffects(camera)
`
In your animation loop, call render.
`c
mya3.render(scene, camera)
`

$3

When you remove a mesh from the scene, remove the corresponding DOM element.
`c
scene.remove(mesh)
mya3.remove(mesh)
``