Accessibility

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

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:

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.

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.