ECharts aria and Decal Patterns

Apache ECharts is widely used for dashboards, especially in data-heavy enterprise and analytics products. It includes two built-in accessibility features: aria, which generates an aria-label describing the chart from its data (chart type, series, values), and decal, which overlays patterns on series so they can be distinguished without colour. Both are off by default. ECharts does not provide keyboard navigation of points, so that and data tables are yours to add.

This guide belongs to chart library accessibility.

Spec reference

  • aria.enabled: true — generates a description and sets aria-label on the chart container; aria.label.description overrides it with your own text; templates (aria.label.general, series, data) control generated wording.
  • aria.decal.show: true — applies default decal patterns to series; custom decals via decal on series items.
  • Renderer — canvas (default) or svg; SVG renders text as text and works better with zoom and some tools.
  • Relevant criteria: SC 1.1.1 (A), SC 1.4.1 (A), SC 2.1.1 (A).
ECharts defaults versus aria and decal enabled Comparison: defaults give an unlabelled canvas with colour-only series; enabling aria and decal adds a generated description and patterns, which you then refine and supplement. ECharts defaults versus aria and decal enabled✗ DefaultsNo accessible nameColour-only seriesCanvas textNo keyboard accessGeneric wording✓ aria + decal enabledGenerated description from dataPattern per seriesSVG renderer option for crisp textStill none: add controls or a tableCustom templates and description

When to use — and when not to

Enable aria and decal on every ECharts chart. Override the generated description with your own summary when the chart’s message matters more than its raw contents (which is usually).

Do not rely on the generated description for large datasets; listing many values in an aria-label produces an unreadable wall of text. ECharts limits the generated data count (aria.data.maxCount), but a human-written summary is better.

The misapplication: enabling aria and assuming the chart is accessible — keyboard users still cannot reach values and the label may be long and generic.

Configuring an ECharts chart Flow: enable aria with a custom description; enable decals; choose the SVG renderer; add labels; provide a table and, if needed, keyboard controls that dispatch highlight and tooltip actions. Configuring an ECharts chartariaenabled with custom descriptiontext alternativedecalpatterns on seriescolour independencerenderer: svgcrisp, scalable textzoom-friendlyLabelslabel.show on key pointsvisible valuesTable and keystable view; dispatchAction showTipkeyboard access

Annotated code example

const chart = echarts.init(el, theme, { renderer: 'svg' });       // SVG for scalable text
chart.setOption({
  aria: {
    enabled: true,
    label: { description: 'Quarterly revenue by region, 2026. North grew fastest (+18%); South declined in Q3.' },  // SC 1.1.1
    decal: { show: true },                                         // patterns per series (SC 1.4.1)
  },
  title: { text: 'Revenue by region, 2026' },
  tooltip: { trigger: 'axis', valueFormatter: (v) => `${v} million euros` },
  xAxis: { type: 'category', data: ['Q1', 'Q2', 'Q3', 'Q4'], name: 'Quarter' },
  yAxis: { type: 'value', name: 'Revenue (million euros)' },
  series: [
    { name: 'North', type: 'bar', data: [4.0, 4.4, 4.6, 4.7], label: { show: true, position: 'top' } },
    { name: 'South', type: 'bar', data: [3.1, 3.3, 2.9, 3.0], label: { show: true, position: 'top' } },
  ],
});

// Keyboard access: a focusable wrapper with arrow keys showing tooltips
let i = 0;
el.tabIndex = 0;
el.addEventListener('keydown', (e) => {
  if (!['ArrowLeft', 'ArrowRight'].includes(e.key)) return;
  e.preventDefault();
  i = Math.max(0, Math.min(3, i + (e.key === 'ArrowRight' ? 1 : -1)));
  chart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: i });
  status.textContent = `${quarters[i]}: North ${north[i]}, South ${south[i]} million euros`;    // announce (SC 4.1.3)
});

Keyboard & AT behaviour

Interaction Behaviour Expected announcement
Reach chart in browse mode aria-label on container Your description
Tab to chart (with your wrapper) Focus Description
Left / Right Your handler shows tooltip Your status message
Table toggle Shows data table Table navigation
ECharts features and accessibility coverage Matrix of features — aria description, decal patterns, SVG renderer, keyboard navigation, data table, legend toggles — against built in and what you add. ECharts features and accessibility coverageBuilt inYou addaria descriptionGeneratedCustom summaryDecal patternsDefault setCustom decalsSVG rendererOptionNoKeyboard navigationNoWrapper with dispatchActionData tabledataView toolboxAccessible HTML tableLegend togglesCanvas or SVG itemsHTML buttons if needed
ECharts covers descriptions and patterns; you add interaction and data access.

Integration context

Patterns for colour independence are explained in patterns and shapes for colour-independent charts. Keyboard models are in canvas & SVG chart keyboard interaction. ECharts is common for heatmaps and Sankeys; see accessible heatmaps and accessible Sankey diagrams.

Gotchas

The dataView toolbox. ECharts’ built-in data view renders a textarea or simple table in a popup; check its accessibility (labels, focus, close button) or render your own HTML table instead.

Decal contrast. Default decals use semi-transparent overlays; in dark themes they may be too faint. Customise decal.color.

Long generated labels. Keep aria.data.maxCount low or provide your own description.

Worked example

An IoT monitoring product used ECharts canvas charts with no accessibility options. Enabling aria with custom summaries, decal patterns tuned for the dark theme, the SVG renderer, a focusable wrapper with arrow-key tooltips and an HTML table toggle turned a set of images into explorable charts. The generated aria descriptions were initially kept but proved too long for multi-series charts, so the team switched to human-written summaries computed from the same data.

Testing it with a screen reader

  1. Browse to the chart; confirm the description is concise and meaningful.
  2. Check greyscale and dark mode; confirm decals distinguish series.
  3. Tab into the chart and use arrows; confirm announced values with units.
  4. Open the table; confirm complete, labelled data.

Common mistakes

  • aria and decal left disabled.
  • Generated descriptions listing dozens of values.
  • No keyboard access to values.
  • Relying on the dataView popup as the table.

Adoption checklist for teams

  1. Create an ECharts base option with aria and decal enabled and theme-tuned decals.
  2. Require a human-written description per chart.
  3. Use the SVG renderer by default for dashboards.
  4. Wrap charts with keyboard navigation and a status region.
  5. Provide HTML tables generated from the series data.

FAQ

Does ECharts support screen readers?

With aria enabled, it provides a text description. Keyboard exploration needs your code.

Are decals enough for colour independence?

They help a lot; combine them with labels and clear legends.

SVG or canvas renderer?

SVG for typical dashboards (crisp text, better zoom); canvas for very large data where performance matters.

Can I translate generated descriptions?

Yes; the aria label templates can be localised.

How do I make legend toggles accessible?

Render an HTML button group that dispatches legendToggleSelect actions, and hide the built-in legend or keep it decorative.

Does ECharts work with forced colours?

Canvas rendering ignores forced colours; SVG rendering may be partially affected. Test and provide high-contrast themes.

What about ECharts GL (3D)?

3D charts are very hard to make accessible; provide tables and summaries and consider 2D alternatives.

Can screen readers read ECharts tooltips?

Tooltips are visual; announce the same content through your status region when keyboard navigation moves between points.

How do I localise aria output?

Provide localised templates under aria.label, or write your own description in the user’s language.

Does ECharts have keyboard support for legends?

Legend items are drawn in the chart; render HTML buttons for series toggles if keyboard users need them.

← Back to Chart Library Accessibility