Accessibility
Accessibility ships in phase 1, not as an afterthought, and it is free in every license tier, permanently. Gating it would block the public-sector buyer maps are most likely to serve, and a map is the chart type screen-reader users are most often locked out of entirely.
Enable it
const map = new ApexMaps(document.getElementById('map'), {
geo: { map: 'eu/nuts0@20m' },
series: [
{
name: 'Adoption',
joinBy: ['nuts_id', 'key'],
data: [{ key: 'DE', value: 41 }, { key: 'FR', value: 37 }],
},
],
a11y: { enabled: true, description: 'auto', dataTable: true },
})
await map.render()
a11y option | Description |
|---|---|
enabled | Master switch. On by default. |
description | 'auto' generates a description from the spec and the data, or pass your own string. |
label | Override the aria-label directly. |
dataTable | true renders a real, visually hidden <table> alongside the map. |
keyboardFeatureLimit | Features stay individually keyboard-reachable below this count. Default 500. |
ARIA roles and the generated description
The SVG root gets role="application", tabindex="0", and an aria-label, plus a <desc> element holding the longer description. With description: 'auto', ApexMaps writes that description from the spec and the current data, because "a map of Europe" tells a screen-reader user nothing they can act on:
Choropleth map of 27 areas. Showing Adoption. Values range from 12 to 41.
5 quantile classes. Highest: Germany at 41, France at 37. 3 areas have no data.
It states the map type, the feature count, the series name, the value range, the classification, the extremes, and how many features have no data. The label and description are rewritten in place on every data update or drilldown, so assistive technology is never left describing a level the reader has already left.
Roving-tabindex keyboard navigation
One tab stop for the whole map, then arrow keys walk the features. A tab stop per feature would make a 3,000-county map unusable by keyboard, which is the mistake this avoids.
| Key | Action |
|---|---|
| Tab | Focus the map (one stop, not one per feature) |
| Arrow Right / Down | Move to the next feature in reading order |
| Arrow Left / Up | Move to the previous feature |
| Home / End | Jump to the first / last feature |
| Enter / Space | Select the focused feature, or drill into it if the series has a drilldown |
| Escape | Leave keyboard navigation |
Reading order is top to bottom in horizontal bands, then left to right within a band, not a raw sort by y-position, which would zigzag across a wide map and disorient the reader. Above keyboardFeatureLimit features, per-feature walking switches off automatically; the generated description and the data table remain the accessible path for a map that large.
Live-region announcements
Every arrow key press replaces the text of a polite aria-live region rather than appending to it, so fast travel through the map does not flood the screen reader with a queue of stale announcements:
const svg = document.querySelector('#map svg')
svg.focus() // starts keyboard navigation
The optional data table
For assistive technology that cannot interpret spatial output at all, a table of feature and value is the only reliable fallback. Set dataTable: true to emit it, visually hidden, alongside the map:
a11y: { enabled: true, dataTable: true }
Respecting prefers-reduced-motion
ApexMaps honors the OS-level reduced-motion setting globally and by default. When a reader has asked for it, camera moves and value transitions degrade to instant state changes instead of animating, and instead of being skipped in a way that would leave a broken half-drawn layout. There is no option to opt out of this on the reader's behalf; it is a commitment, not a default you are expected to override.
The commitment
Two things about accessibility do not change with license tier or product phase:
- Never gated. Free in every tier, permanently. It is the wrong thing to charge for, and gating it would disqualify the product from public-sector procurement.
- On by default. A caller does not have to opt in to get an ARIA label, a description, and keyboard navigation; they have to opt out.