Accessibility

A WebGL canvas does not automatically communicate model meaning to assistive technology. Provide semantic content around it.

Name the experience

<section aria-labelledby="product-model-title">
  <h2 id="product-model-title">Explore the camera body</h2>
  <p>Drag to rotate. Use the controls below to inspect the ports.</p>
  <div style={{ height: 500 }}>
    <ModelLabViewer src="/models/camera.glb" />
  </div>
</section>

Keyboard-accessible controls

Expose important actions as regular buttons outside the canvas, including reset, play/pause, previous/next view, and reduced-motion options.

Reduced motion

const reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)')

<ModelLabViewer
  playSequence={!reduceMotion}
  sequenceProgress={reduceMotion ? 1 : undefined}
/>

Color and contrast

Do not rely on material color alone to communicate state. Ensure overlay text and buttons meet contrast requirements.

Fallback content

Provide product images, descriptions, specifications, or captions so the page remains useful when WebGL is unavailable.