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)