Accessibility

Wijmo Chart controls provide accessibility support for chart names, keyboard focus, screen-reader semantics, and supported chart interactions.

The available behavior depends on the chart type, rendered content, and control configuration. Chart accessibility support is provided at the control level. Applications remain responsible for accessible labels, equivalent representations of important visual information, and the accessibility of surrounding content.

Provide an Accessible Chart Name

A chart should have a name that describes its purpose or content. Set the chart name with the ariaLabel property:

const chart = new wijmo.chart.FlexChart('#chart', {
    itemsSource: data,
    bindingX: 'date',
    series: [
        { name: 'Sales', binding: 'sales' }
    ],
    ariaLabel: 'Quarterly sales by region'
});

If ariaLabel is not set, Wijmo can generate a chart label from available chart information, such as the chart title, chart type, and visible series.

The chart name identifies the chart as a whole. It does not replace a text or data alternative when users need to understand detailed values, trends, or comparisons presented only by the chart.

Enable Keyboard Chart Navigation

Chart data regions are not keyboard-focusable by default. Set focusMode to true when users need to enter the chart with the Tab key and navigate supported chart regions.

chart.focusMode = true;

Depending on the chart type and its content, supported regions can include:

• The chart title.

• Series and data points.

• Annotations.

• Legend items.

The following commands apply when focusMode is enabled and the corresponding region is available.

Individual data points and legend items are accessed through keyboard navigation within a chart region. They are not added to the page's normal Tab sequence.

Show Tooltips on Keyboard Focus

When both focusMode and showTooltipOnFocus are enabled, configured tooltips appear when keyboard focus moves to a supported series point or annotation.

chart.focusMode = true;
chart.showTooltipOnFocus = true;

Both properties are disabled by default. Setting showTooltipOnFocus alone does not make chart regions keyboard-focusable.

Tooltip content should supplement, rather than replace, the chart's accessible name and any text or data alternative required by the application.

Keyboard Alternatives for Chart Interactions

When the corresponding feature is enabled, the following keyboard alternatives are available.

These commands apply only when the corresponding feature is enabled and focus is in the appropriate chart region.

Rendering and Chart-Type Support

Built-in accessibility semantics are provided for the SVG, Canvas, and WebGL rendering engines. Applications that use a custom rendering engine are responsible for providing the required accessibility semantics and keyboard behavior.

Accessibility behavior can vary by chart type:

• FlexMap exposes a title region when a header is set and provides accessible zoom controls with status announcements, but it does not expose map data through a series or data-point accessibility region.

• Financial charts can expose values appropriate to the rendered chart type. For example, OHLC charts can expose open, high, low, and close values.

• Waterfall series can expose information such as start, total, intermediate, rising, falling, change, and cumulative values.

• Built-in analytics and financial series provide specialized semantics where applicable. These include TrendLine, MovingAverage, FunctionSeries, ErrorBar, Waterfall, BoxWhisker, BreakEven, ATR, CCI, RSI, Williams %R, Bollinger Bands, Envelopes, MACD, Stochastic, and Fibonacci tools.

• HeikinAshi, LineBreak, Renko, Kagi, and PointAndFigure charts expose semantics based on their rendered visual points rather than only the original source-data rows.

The generated chart-level summary does not include an axis summary. Applications should provide additional context when axis titles, scales, ranges, or units are necessary to understand the chart.

Custom or highly transformed series are not guaranteed to receive the same semantic coverage as built-in Wijmo series. This includes application-defined transformations, conditional formatting, and sorting logic that change the meaning of the rendered data.

Application Responsibilities

Applications that customize chart content or styling should verify:

• Chart names and equivalent text or data alternatives.

• Keyboard focus visibility.

• Text and graphical-object contrast.

• Focus behavior for custom annotations, templates, and overlays.

• Target size of chart controls such as RangeSelector handles and map controls.

• Behavior at the zoom levels required by the application.

• Screen-reader output in the browsers and assistive technologies supported by the application.

Wijmo Chart controls provide support for applicable WCAG 2.0, 2.1, and 2.2 Level AA requirements. This support does not guarantee that every chart or complete application satisfies every WCAG success criterion.

For the requirements, see Web Content Accessibility Guidelines. For screen-reader testing, see NVDA.