ACCESSIBILITY CONFORMANCE REPORT
ApexCharts VPAT — WCAG 2.2 Level A and AA, Revised Section 508, EN 301 549 v3.2.1
- Product: ApexCharts.js (v5.x)
- Product Type: JavaScript SVG charting library
- Report Date: 15 May, 2026
- Evaluation Methods: Source-code review · automated unit tests · Playwright keyboard interaction tests · TypeScript strict checks · documentation review
- Standards Considered: WCAG 2.2 Level A and AA, Revised Section 508, EN 301 549 v3.2.1
- Accessibility Documentation: apexcharts.com/accessibility/
Product Description
ApexCharts.js is a JavaScript charting library used to render interactive charts including line, area, bar, column, pie, donut, polar area, heatmap, treemap, radial bar, scatter, bubble, radar, candlestick, box plot, range bar and range area types.
The full apexcharts bundle includes keyboard navigation by default. Custom tree-shaken bundles built from apexcharts/core require the keyboard feature to be explicitly imported.
Evaluation Scope and Assumptions
This report covers the ApexCharts.js library itself. It assumes:
- The full ApexCharts bundle is used, or the
keyboardfeature is explicitly imported when using a tree-shakenapexcharts/corebundle. chart.accessibility.enabledistrue(default) and keyboard navigation is enabled (default).- Implementers supply meaningful chart titles, series names and (where helpful)
chart.accessibility.descriptiontext. - Implementers do not override accessible defaults — focus colours, ARIA attributes, keyboard handlers — in ways that reduce accessibility.
- The application embedding ApexCharts is responsible for page-level requirements such as page title, language attribute and navigation landmarks.
WCAG 2.2 Conformance Summary
The table below lists every WCAG 2.2 Level A and AA criterion.
Level A
| Criterion | Conformance | Remarks |
|---|---|---|
| 1.1.1 Non-text Content | Supports | SVG carries role="img" (or role="application" when keyboard nav is enabled), an aria-label, a child <title> and an optional <desc>. The auto-generated label includes series names when no explicit description is provided. Focused data points additionally receive contextual aria-label. |
| 1.2.1 Audio-only / Video-only (Prerecorded) | Not Applicable | Library renders SVG; no audio or video. |
| 1.2.2 Captions (Prerecorded) | Not Applicable | No prerecorded media. |
| 1.2.3 Audio Description / Media Alternative (Prerecorded) | Not Applicable | No prerecorded media. |
| 1.3.1 Info and Relationships | Supports | ARIA roles and attributes communicate structure (see "ARIA and Screen Reader Support" below). |
| 1.3.2 Meaningful Sequence | Supports | Tab order: chart SVG → legend items → toolbar buttons. Arrow-key navigation follows data order. |
| 1.3.3 Sensory Characteristics | Supports | Documentation refers to keys by name and does not rely on visual position or shape. |
| 1.4.1 Use of Color | Supports | Colour is never the sole means of conveying information. Every series is paired with a named legend marker, a tooltip header on hover/focus, an aria-label on the focused data point, and a labelled axis position or slice label. Pattern fills (fill.type: 'pattern') provide an additional non-colour visual channel, and four colour-blind palettes (deuteranopia, protanopia, tritanopia, highContrast) are selectable via theme.accessibility.colorBlindMode. |
| 1.4.2 Audio Control | Not Applicable | No audio output. |
| 2.1.1 Keyboard | Supports | Arrow keys, Home, End, Enter, Space, Escape, plus +/−/0 for zoom and Shift+Arrow for pan. All mouse-driven functionality has a keyboard equivalent. |
| 2.1.2 No Keyboard Trap | Supports | Verified by automated Playwright tests that Tab and Shift+Tab move focus through the chart to elements before/after it on the page. |
| 2.1.4 Character Key Shortcuts | Supports | All shortcuts use named keys or modifier-bearing keys. No single printable-character shortcuts. |
| 2.2.1 Timing Adjustable | Supports | No time limits; tooltips and updates are not auto-dismissed. |
| 2.2.2 Pause, Stop, Hide | Supports | chart.animations.enabled: false disables animation. The library also respects OS prefers-reduced-motion. |
| 2.3.1 Three Flashes | Supports | Animations operate well below the 3 Hz threshold; no strobe content. |
| 2.4.1 Bypass Blocks | Not Applicable | Single component, not a multi-block page. |
| 2.4.2 Page Titled | Not Applicable | Page-level concern. |
| 2.4.3 Focus Order | Supports | DOM order matches reading order; tab sequence is predictable. |
| 2.4.4 Link Purpose (In Context) | Not Applicable | Library renders no links by default. |
| 2.5.1 Pointer Gestures | Supports | Drag gestures (zoom, pan) have keyboard alternatives. |
| 2.5.2 Pointer Cancellation | Supports | Click events fire on mouseup/pointerup (browser default). |
| 2.5.3 Label in Name | Supports | Visible legend text matches aria-label. Toolbar title matches aria-label. |
| 2.5.4 Motion Actuation | Not Applicable | No motion-triggered functionality. |
| 3.1.1 Language of Page | Not Applicable | Embedding application sets <html lang>. |
| 3.2.1 On Focus | Supports | Focusing a chart element changes only the visual focus indicator and shows the contextual tooltip. No navigation or context change occurs on focus. |
| 3.2.2 On Input | Supports | Enter and Space invoke documented event handlers identically to a mouse click. |
| 3.2.6 Consistent Help (WCAG 2.2) | Not Applicable | Library renders no help text. |
| 3.3.1 Error Identification | Not Applicable | No input controls. |
| 3.3.2 Labels or Instructions | Not Applicable | No input controls. |
| 3.3.7 Redundant Entry (WCAG 2.2) | Not Applicable | No input controls. |
| 4.1.1 Parsing | Not Applicable | Withdrawn from WCAG 2.2. |
| 4.1.2 Name, Role, Value | Supports | Every interactive element exposes name, role and state. Toolbar uses native <button> elements; keyboard-focused data points expose role="img" and a contextual label. |
Level AA
| Criterion | Conformance | Remarks |
|---|---|---|
| 1.2.4 Captions (Live) | Not Applicable | No live media. |
| 1.2.5 Audio Description (Prerecorded) | Not Applicable | No prerecorded media. |
| 1.3.4 Orientation | Supports | Charts re-flow on resize; orientation lock is a viewport / OS concern. |
| 1.3.5 Identify Input Purpose | Not Applicable | No input fields. |
| 1.4.3 Contrast (Minimum) | Supports | All text rendered by the library meets ≥ 4.5:1 against its background by default: axis labels, legend text, tooltip text and data labels use the chart's foreground colour, and data labels inside coloured fills use an auto-computed contrasting colour. Utils.getContrastRatio() is shipped so implementers can verify any custom themes they choose to apply. |
| 1.4.4 Resize Text | Supports | Live SVG <text> scales with browser zoom. No clipping at 200% on documented samples. |
| 1.4.5 Images of Text | Supports | All chart text is live SVG. |
| 1.4.10 Reflow | Supports | Charts respect their container's width. |
| 1.4.11 Non-text Contrast | Supports | 2 px focus indicator on all focusable elements; CSS custom property switches focus colour per theme; toolbar hit targets 24 × 24 px. All ten built-in palettes (palette1–palette10) are validated against both the light (#FFFFFF) and dark (#293450) theme backgrounds at ≥ 3:1 by tests/unit/contrast.spec.js. The high-contrast palette is validated against the light background only (dark-on-light by design). |
| 1.4.12 Text Spacing | Supports | No fixed line-height or max-height containers around chart text. |
| 1.4.13 Content on Hover or Focus | Supports | Tooltip is dismissible (Escape), hoverable (positioned outside focused element), persistent until dismissed or data changes. |
| 2.4.5 Multiple Ways | Not Applicable | Single component. |
| 2.4.6 Headings and Labels | Supports | chart.title / chart.subtitle render as visible headings; axis titles configurable. |
| 2.4.7 Focus Visible | Supports | Visible focus style on every focusable element; theme-adaptive focus colour. |
| 2.4.11 Focus Not Obscured Minimum (WCAG 2.2) | Supports | Tooltip is repositioned to avoid covering the focused data point during keyboard nav. |
| 2.5.7 Dragging Movements (WCAG 2.2) | Supports | +/−/0 zoom and Shift+ArrowLeft/Right pan are keyboard alternatives to drag-to-zoom and drag-to-pan. |
| 2.5.8 Target Size Minimum (WCAG 2.2) | Supports | Toolbar buttons 24 × 24 CSS px; legend hit area exceeds the minimum. |
| 3.1.2 Language of Parts | Not Applicable | No language switching within the library. |
| 3.2.3 Consistent Navigation | Not Applicable | Single-component library. |
| 3.2.4 Consistent Identification | Supports | Identical components carry identical roles, labels and behaviours across chart types. |
| 3.3.3 Error Suggestion | Not Applicable | No input controls. |
| 3.3.4 Error Prevention (Legal, Financial, Data) | Not Applicable | No input controls. |
| 3.3.8 Accessible Authentication Minimum (WCAG 2.2) | Not Applicable | No authentication. |
| 4.1.3 Status Messages | Supports | Tooltip uses aria-live="polite"; chart-level events (zoom, pan, reset) announce via a separate visually-hidden role="status" region. |
Additional Notes by Feature
Keyboard Accessibility
ApexCharts ships built-in keyboard support in the full bundle and as the keyboard feature for tree-shaken builds. Users can focus the chart and navigate data points and series:
- Arrow keys — traverse data points (Left/Right) and series (Up/Down). Line, area, scatter, bubble, radar and range area use Left/Right between points and Up/Down between series; pie, donut and polar area use Left/Right between slices; heatmap and treemap support Left/Right and Up/Down between cells.
- Home / End — jump to first / last data point in the current series.
- Enter / Space — fire the same
markerClick/dataPointSelectionevent a mouse click would. - Escape (1st press) — dismiss the tooltip while keeping chart focus.
- Escape (2nd press) — exit keyboard navigation entirely.
- + / = — zoom in.
- − / _ — zoom out.
- 0 — reset zoom.
- Shift + ArrowLeft / ArrowRight — pan the visible x-range.
Assessment: Supports. All chart functionality reachable by mouse is reachable by keyboard. Verified by 1,547 unit tests and 46 Playwright tests including dedicated keyboard-trap and keyboard-zoom suites.
ARIA and Screen Reader Support
ApexCharts emits a comprehensive ARIA surface:
- The chart
<svg>carriesrole="application"(default, with keyboard nav) orrole="img", plusaria-label, a child<title>and an optional<desc>fromchart.accessibility.description. - Each legend item is
role="button"withtabindex="0",aria-label="<series>, <visible|hidden>. Press Enter or Space to toggle.", andaria-pressedreflecting the collapsed state. - The tooltip is
role="tooltip"witharia-live="polite"andaria-atomic="true".aria-hiddenis toggled synchronously with show/hide. - Toolbar controls are native
<button type="button">elements with locale-awaretitleandaria-label. Toggle buttons carryaria-pressed; the menu trigger carriesaria-haspopup="true"andaria-expanded. - A visually-hidden
role="status"aria-live="polite"region announces zoom, pan and reset events that have no associated tooltip update. - Keyboard-focused data points carry
role="img"and a contextualaria-labelsuch as "Sales: 1,250, Q3 2024".
Assessment: Supports. The accessible experience still benefits from implementer-supplied series names, axis titles and (for complex charts) a longer chart.accessibility.description.
Focus Visibility
Every focusable element has a visible focus style:
- SVG data points (bar, candlestick, box plot, range bar, pie, heatmap, treemap) — 2 px stroke applied via the
apexcharts-keyboard-focusedclass. - SVG markers (line, area, scatter, bubble, radar) — 2 px stroke applied identically.
- Legend items — 2 px outline with 2 px offset.
- Toolbar buttons — 2 px outline with 2 px offset and 2 px border-radius.
- Hamburger menu items — 2 px inset outline with subtle background change.
The focus colour is themed via the --apexcharts-focus-color CSS custom property: #008FFB for the default light theme, #FFD500 for the dark theme, #FFFF00 for the high-contrast theme. Implementers can override the variable per theme.
Assessment: Supports. Final conformance still depends on implementer CSS that does not override the focus rules.
Color and Contrast
All ten built-in default palettes (palette1 through palette10) are validated by automated tests in tests/unit/contrast.spec.js to meet ≥ 3:1 non-text contrast (WCAG 1.4.11) against both the default light theme background (#FFFFFF) and the default dark theme background (#293450). This guarantee was introduced in v5.12.0 — palette colours that previously fell below 3:1 were re-tuned in HSL space (preserving hue and saturation, adjusting lightness) so that chart series, lines, markers and fills remain visually distinguishable from the page background on either theme without relying on hue alone.
Colour-blind and high-contrast modes are selectable via theme.accessibility.colorBlindMode:
'deuteranopia'— Wong-safe 7-colour palette'protanopia'— IBM Design Language palette'tritanopia'— Tritanopia-safe palette'highContrast'— 7-colour palette validated against the default light theme background at ≥ 3:1 (dark-on-light by design, so it is not validated against the dark theme)
Pattern fills (fill.type: 'pattern') provide a non-colour visual channel for users who cannot distinguish hues at all.
A utility, Utils.getContrastRatio(hex1, hex2), is shipped for implementers who wish to validate their custom themes against WCAG 1.4.3 / 1.4.11 thresholds.
Assessment: Supports. All library-supplied palettes are accessible against both default theme backgrounds, and all default text colours meet the WCAG 1.4.3 threshold. Implementer-supplied custom colours fall outside the library's control; documentation directs implementers to Utils.getContrastRatio() to validate them.
Reduced Motion
The library respects the OS-level prefers-reduced-motion: reduce media query: when set, all animations and transitions inside the chart canvas drop to ~0.01 ms duration. Implementers can also force-disable animation via chart.animations.enabled: false.
Conformance Statement
Based on source-code review, automated tests, and the published accessibility documentation, ApexCharts.js v5.x supports WCAG 2.2 Level A and AA for web-based chart components. Strongest documented support is for keyboard navigation (including keyboard-only zoom and pan), focusable elements, ARIA roles and states, configurable accessibility descriptions, polite live announcements, themeable focus styling, and colour-blind / high-contrast palettes. Conformance assumes the integration assumptions listed under "Evaluation Scope and Assumptions".