Accessibility

A canvas is opaque to assistive technology by default. CanvasGlobe does the work to make it usable anyway, and it is on by default.

What you get automatically

• role="img" and an aria-label on the canvas
• A tab stop, when keyboard and interactive are on
• A visually hidden aria-live="polite" region that announces the view as it changes
• prefers-reduced-motion support

Keyboard

Tab to the globe below and try it.

Loading globe…

Key	Action
← → ↑ ↓	Rotate or pan. Hold Shift for bigger steps
+ / -	Zoom in and out
0	Reset to the initial view
PageDown / PageUp	Cycle through markers, flying to each
Enter / Space	Activate the focused marker

The focused marker gets a visible ring in the theme's focus colour, and its label is announced.

Labelling it properly

The default aria-label is generic. Replace it with what the chart actually shows:

createGlobe(canvas, {
  ariaLabel: "Signups by city, March 2026",
});

Or set aria-label on the canvas element yourself: CanvasGlobe will not overwrite an existing one.

Provide the data in text too

A live region announcing "22.5, 78.4 at 2.0x" is useful for navigation, but it is not a substitute for the underlying numbers. For anything conveying data, put a table nearby:

<canvas id="globe" aria-describedby="globe-table"></canvas>

<table id="globe-table">
  <caption>Signups by city</caption>
  <tbody>
    <tr><th>Ahmedabad</th><td>12</td></tr>
    <tr><th>London</th><td>8</td></tr>
  </tbody>
</table>

Visually hide it if you must, but do not skip it. A decorative globe on a landing page is fine with just a label; a chart someone needs to read is not.

Reduced motion

When prefers-reduced-motion: reduce is set:

Normally	With reduced motion
Auto-rotation	Stopped
flyTo eases	Jumps
Marker pulse rings	Held still
Arc heads travel	Static full line
Ping bursts	Not drawn
Orbit rings turn	Held still

It responds to changes live, so toggling the OS setting updates a running globe.

respectReducedMotion: false;   // opt out, if you have a very good reason

Turning interaction off

For a purely decorative globe, take it out of the tab order entirely:

createGlobe(canvas, {
  interactive: false,
  keyboard: false,
  ariaLabel: "Decorative globe",
});

An aria-hidden="true" canvas is also reasonable for pure decoration.

Colour contrast

The built-in themes vary a lot. noir and political have strong contrast; hologram and aurora are deliberately low-contrast and atmospheric. If a marker colour has to be distinguishable, check it, and do not rely on colour alone in a choropleth. Pair it with a legend and labels.