Charts - Accessibility

#Usage

import { ChartAccessibility, ChartSvg } from '@primeui/vue-chart';

<ChartSvg>
    <!-- series and axes -->
    <ChartAccessibility />
</ChartSvg>

Charts auto-generate basic screen reader descriptions from data by default. Add ChartAccessibility to take full control: override descriptions, configure keyboard navigation between data points, and style focus indicators.

#Basic

Charts auto-generate screen reader descriptions from data when no ChartAccessibility component is mounted. Add ChartAccessibility to override descriptions, adjust verbosity, configure keyboard navigation, and style focus indicators.

#Color Vision

Color alone can be difficult to distinguish for viewers with color vision deficiency. Set patterns to true to make every series distinguishable by texture in addition to color. Filled marks receive a cycled texture pattern, line series receive distinct dash styles, and heatmaps switch to a colorblind-safe sequential scale. An explicit color, gradient, or pattern is always respected, so patterns fills the default without overriding a deliberate choice.

<ChartSvg>
    <!-- series -->
    <ChartAccessibility patterns />
</ChartSvg>

Patterns travel through the same fill pipeline as solid colors, so the legend and tooltip show the pattern, and the SVG and Canvas renderers produce matching output.

A pattern can also be set directly, per series or per item, without enabling the full auto-mode. A PatternFill is a FillValue, accepted anywhere a color is, so assigning one to a mark's color sets the texture.

import type { PatternFill } from '@primeui/chart-types';

const color: PatternFill = { pattern: 'diagonal', color: '#3B82F6' };

color is the solid fill of the shape. The texture is knocked out of that fill as transparent grooves, so the mark reads as a filled color carrying a distinguishing texture rather than sparse lines on an empty background. Set backgroundColor for an opaque two-tone pattern, where the texture is painted in the second color instead of left transparent. The built-in patterns are dots, lines-horizontal, lines-vertical, diagonal, diagonal-reverse, grid, crosshatch, and zigzag. Set size to change the tile size and strokeWidth to change the texture line weight.

#Custom Description

Set description to provide a custom screen reader summary of the chart. When omitted the chart auto-generates a description from the data, series names, and chart type. Set typeDescription to override the chart type label when the auto-detected description is too broad, or for treemap and heatmap charts where the auto-generated label is the raw internal identifier. Set headingLevel to control the heading element used for the visually hidden screen reader section. The default is 'h4'.

#Point Descriptions

Each data point gets an auto-generated aria-label describing its category, value, and series. Set pointDescriptionFormatter to customize the text. Set seriesDescriptionFormatter to customize the series-level description. Set pointDescriptionThreshold to disable per-point labels on large datasets; when the point count exceeds the threshold, only the series-level description is announced. These descriptions apply to the SVG renderer; canvas charts expose the same data through the screen-reader data table instead.

#Screen Reader Data Table

Charts also render a visually hidden data table for assistive technology. The table uses the chart's registered data model instead of the rendered SVG or Canvas marks, so screen readers can inspect the underlying values by row and column.

Set dataTableMaxRows to cap how many rows are rendered in the hidden table. The default cap is 200; when more rows exist, a summary row reports how many rows were omitted. Set dataTableCellFormatter to format each rendered table cell. The formatter also applies to CSV export, so downloaded values can match the accessible table text.

<ChartAccessibility description="Quarterly revenue by region, comparing enterprise and commercial segments." :dataTableMaxRows="50" :dataTableCellFormatter="formatAccessibilityCell" />

function formatAccessibilityCell({ value, column, isNumeric }) {
    if (isNumeric && column === 'Value') {
        return new Intl.NumberFormat('en-US', {
            style: 'currency',
            currency: 'USD',
            maximumFractionDigits: 0
        }).format(Number(value));
    }

    return String(value);
}

CSV export uses the same data-table columns and formatter, but exports every chart row instead of applying the screen reader row cap.

#Keyboard Navigation

Keyboard navigation is enabled by default when ChartAccessibility is mounted. Arrow keys move between data points within a series; Tab moves between series. Set keyboardNavigation.enabled to false to disable it.

Series-level navigation options live under keyboardNavigation.seriesNavigation. Set mode to 'serialize' to navigate all points as a flat list across all series instead of per-series. Set skipNullPoints to false to allow landing on null data points. Set rememberPointFocus to true to restore the last focused point index when switching back to a series. Set pointNavigationEnabledThreshold to disable per-point navigation when a series exceeds a given size. Set keyboardNavigation.wrapAround to false to stop at the last point instead of cycling back to the first.

#Focus Indicator

The focused data point shows a visible focus ring, configured under keyboardNavigation.focusBorder. Set style.color, style.width, style.lineStyle, and style.borderRadius to customize its appearance. Set margin to control the gap between the focus ring and the element. Set hideBrowserFocusOutline to true (default) to suppress the browser's native focus outline. Set enabled to false to remove the custom ring entirely without disabling keyboard navigation.

#Landmark Verbosity

Set landmarkVerbosity to control how many ARIA landmarks are added to the chart. 'all' (default) adds a landmark per series for fine-grained screen reader navigation. 'chart' adds a single chart-level landmark. 'disabled' adds none, which is appropriate when the chart sits inside an already-labeled region.

#Disabling Accessibility

Set enabled to false to disable all accessibility features. Only do this when the chart is purely decorative and a text alternative is provided elsewhere on the page.

#API

#ChartAccessibility

#PatternFill

Assignable to a mark's color (or a per-item color accessor) anywhere a solid color is accepted.

#KeyboardNavigationConfig

#KeyboardNavigationConfig: Focus Border

Set via keyboardNavigation.focusBorder.

#KeyboardNavigationConfig: Series Navigation

Set via keyboardNavigation.seriesNavigation.

#PointDescriptionContext

Passed to pointDescriptionFormatter.

#SeriesDescriptionContext

Passed to seriesDescriptionFormatter.

#DataTableCellContext

Passed to dataTableCellFormatter.

#Related Docs

• Responsive
• Export