# Accessibility

> WestCoast Charts 1.1.5, release, public Core release, on npm. HTML: https://westcoast-charts.com/docs/accessibility/ · Index for agents: https://westcoast-charts.com/llms.txt · Source: library repository, commit 95f093ba8d388c579d9f94701d3322c728c77632

> This is the pinned library technical reference. Its test descriptions and contrast targets document that source snapshot; they are not an independent accessibility certification of every chart or application. Source-only test commands and internal paths are not files promised by the public distribution archive.

Everything is on by default; nothing changes the visual design until a
keyboard user starts navigating.

## Options

```js
chart: {
  accessibility: {
    enabled: true,                 // master switch
    description: undefined,        // <desc> text; auto-generated when empty
    announcements: { enabled: true },
    keyboard: { enabled: true, navigation: { enabled: true, wrapAround: false } },
  },
  events: { keyDown(e, chart, { w }) {}, keyUp(e, chart, { w }) {} },
},
theme: { accessibility: { colorBlindMode: '' } }, // deuteranopia | protanopia | tritanopia | highContrast
wcc: { a11y: { dataTable: 'hidden', dataTableMaxRows: 500, strings: {} } },
```

The colour-vision palettes ship with `west-coast-charts/types` or the light
entry `west-coast-charts/types/themes`. A core-only chart that sets
`colorBlindMode` keeps the normal palette and logs one console hint naming the
entry. Everything else on this page (keyboard, announcements, data table,
focus, reduced motion, forced colours) is in the core.

## What you get

* The chart SVG is focusable (`tabindex="0"`), has an `aria-label` (chart title or
  "Line chart") and `<desc>` (your description, or an automatic summary of
  type, series names, number of points and value range; charts with two or
  more value axes get one range per axis, in that axis' format; stacked
  charts add the range of the category totals).
* The accessible name uses ARIA instead of a root SVG `<title>` so the browser does not display an unrelated native hover label over the data tooltip. The description and keyboard interactions remain available.
* Keyboard (spec 04 §1.2): ←/→ point, ↑/↓ series (hidden series and nulls
  skipped), Home/End, Enter/Space = click (fires `dataPointSelection`,
  `markerClick`), `+`/`=`, `-`, `0` zoom in/out/reset and Shift+←/→ pan on
  zoomable numeric/datetime charts, Escape twice (tooltip, then navigation;
  resets the zoom when no reset button is visible). Pie/donut/polar: slices;
  radialBar: rings. Unhandled keys (Tab!) are never consumed.
* The focused point gets a focus ring in `--wcc-focus-ring` (falls back to
  `--apexcharts-focus-color`: light `#008FFB`, dark `#FFD500`, high contrast
  `#FFFF00`), `role="img"` with a contextual `aria-label`, referenced by
  `aria-activedescendant`; the tooltip is shown for it. The SVG outline only
  appears for keyboard focus (`:focus-visible`), never after a mouse click.
* A polite live region announces points, selection, zoom and pan.
* Data table: visually hidden `<table>` with caption and headers by default;
  `dataTable: 'details'` shows a "Show data table" disclosure below the
  chart; `false` removes it. Stacked axis charts add a `Total` column (what
  the stack tops show); 100 % stacked cells also carry each series' share.
  `chart.describe()` returns the same table.
* Toolbar: native `<button>`s with names, `aria-pressed` on the zoom/pan/
  selection toggles, `aria-haspopup`/`aria-expanded` on the export menu,
  arrow/Home/End/Escape inside the menu. Premium presets use 28x28 px
  targets (WCAG 2.5.8); `classic` keeps the 4.7.0 20 px icons.
* Focus and the focused point survive updates, zoom and realtime redraws.
* `prefers-reduced-motion` disables animation (`animations.respectReducedMotion`).
* Colour-vision palettes: our own palettes, >= 3:1 against light and dark
  surfaces and >= 15 dE apart under simulated deficiency; explicit
  `series[].color` is never remapped. `highContrast` also widens strokes,
  turns data labels on and adds `.apexcharts-high-contrast`.

## Strings

All announcement and description texts can be replaced, e.g. German:

```js
wcc: { a11y: { strings: {
  chartTitle: '{type}-Diagramm',
  point: '{series}, {category}: {value}. Punkt {i} von {n}.',
  types: { line: 'Linien' },
} } }
```

See `src/modules/a11y/Describe.js` for the full list.

## Checks

* `npm run a11y`: axe-core (WCAG 2.0/2.1/2.2 A+AA + best practice) on 15
  chart types x 4 themes, plus keyboard checks (focus, navigation, Escape,
  no trap, no outline on click, keyboard zoom/pan/reset).
* Unit tests: `tests/unit/a11y.spec.js`, `tests/unit/a11y-colour.spec.js`.

## Source and licence

Copied from `docs/ACCESSIBILITY.md` at library commit `95f093ba8d388c579d9f94701d3322c728c77632`. Original source SHA-256: `4f23aad0e48086e453107e229be631f14a402bcbe03a4d29a6c62072a1835bfc`. The imported document is retained unchanged; this website adds this provenance and licence section. [Original attribution notice](https://github.com/Lokumbus/west-coast-charts-core/blob/bdb919664ca330f98ba8798087bc6db0450f0b7c/NOTICE).

```text
The MIT License (MIT)

Copyright (c) 2018 ApexCharts
Copyright (c) 2026 West Coast Software (modifications, see NOTICE)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
```