Accessibility in Angular Chart

31 Aug 202611 minutes to read

The Chart component follows the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2, and relevant WAI-ARIA roles.

Accessibility features (keyboard navigation, ARIA wiring, and high-contrast support) are enabled by default. You can customize the accessible name and ARIA role of the chart using the accessibility property (accessibilityDescription and accessibilityRole), and adjust the visible focus indicator with focusBorderColor, focusBorderWidth, and focusBorderMargin. Refer to the Getting Started page for Angular and @syncfusion/ej2-angular-charts version requirements.

Configuring accessibility

The following example shows how to provide an accessible description, set the ARIA role, and customize the focus border for the Chart.

import { ChartModule, CategoryService, ColumnSeriesService, LegendService, TooltipService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';

@Component({
    imports: [ChartModule],
    providers: [CategoryService, ColumnSeriesService, LegendService, TooltipService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title'
    [tooltip]='tooltip' [legendSettings]='legendSettings' [accessibility]='accessibility'
    focusBorderColor='#0066FF' focusBorderWidth=2 focusBorderMargin=3>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Column' xName='month' yName='sales' name='Sales'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public primaryYAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public tooltip?: Object;
    public legendSettings?: Object;
    public accessibility?: Object;

    ngOnInit(): void {
        this.chartData = [
            { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
            { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
            { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
            { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
            { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
            { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
        ];
        this.primaryXAxis = { valueType: 'Category' };
        this.primaryYAxis = { labelFormat: '${value}K' };
        this.title = 'Monthly Sales';
        this.tooltip = { enable: true };
        this.legendSettings = { visible: true };
        // Customize the chart's accessibility attributes and visible focus border.
        this.accessibility = {
            accessibilityDescription: 'A column chart showing monthly sales in thousands of units for the year.',
            accessibilityRole: 'chart'
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The Chart component’s accessibility compliance is outlined below.

Accessibility Criteria Compatibility
WCAG 2.2 Support Yes
Section 508 Support Yes
Screen Reader Support Yes
Right-To-Left Support Yes
Color Contrast Yes
Mobile Device Support Yes
Keyboard Navigation Support Yes
Accessibility Checker Validation Yes
Axe-core Accessibility Validation Yes
Yes - All features of the component meet the requirement.
Intermediate - Some features of the component do not meet the requirement.
No - The component does not meet the requirement.

WAI-ARIA attributes

The Chart component follows the WAI-ARIA patterns to meet accessibility requirements. The following ARIA roles and attributes are used by the Chart component.

Roles

  • role="img" - Applied to the chart container.
  • role="button" - Applied to interactive elements such as legend items and selectable data points.
  • role="region" - Applied to logical groupings within the chart (for example, the legend or plot area) so they are announced as named regions.

Attributes

  • aria-label - Provides an accessible name for the chart or for individual elements that have no visible text.
  • aria-hidden - Hides purely decorative elements from assistive technologies.
  • aria-pressed - Communicates the toggled state of interactive elements such as legend items.

Keyboard interaction

The Chart component follows keyboard interaction guidelines to improve accessibility for users of assistive technology and for keyboard-only users. Shortcuts are grouped below by context (mode) so it is clear which keys apply where.

General navigation

Press Action
Alt + J Moves focus to the chart container (first focusable chart element such as the first series/point or legend).
Tab Moves focus to the next focusable element within the chart.
Shift + Tab Moves focus to the previous focusable element within the chart.
Enter / Space Activates or selects the focused element (for example, toggles a legend item or selects a data point).
Esc Closes tooltips or modal overlays (if open).

Series / Data-point navigation

Press Action
Left Arrow Moves focus to the previous data point in the active series.
Right Arrow Moves focus to the next data point in the active series.
Up Arrow Moves focus to the data point above when applicable.
Down Arrow Moves focus to the data point below when applicable.
Enter / Space Selects the focused data point.

Legend focus mode

(To focus the legend, press Tab until the legend receives focus, or use keyboard navigation to move into legend items.)

Press Action
Left Arrow Moves legend focus to the previous legend item.
Right Arrow Moves legend focus to the next legend item.
Up Arrow Moves legend focus up one item (if legend is vertical).
Down Arrow Moves legend focus down one item (if legend is vertical).
Enter / Space Toggles visibility of the focused series (show/hide).

Zoom / Pan mode

(Enable zooming/panning in the chart’s configuration to use these shortcuts.)

Press Action
Ctrl + + Zoom in the chart.
Ctrl + - Zoom out the chart.
Left / Right Arrow Pan the chart horizontally when pan is enabled.
Up / Down Arrow Pan the chart vertically when pan is enabled.
R Reset the zoom/pan to the default view.

Notes and clarifications

  • The meaning of arrow keys depends on the current focus and mode: when the legend is focused, arrow keys move between legend items; when a data point or series is focused, arrow keys move between points/series; when pan/zoom is enabled and active, arrow keys pan the chart.
  • When more than one mode is active at the same time (for example, a data point has focus while pan is enabled), focus-based navigation takes precedence over panning. Press Esc to leave the data point and return pan control to the chart area.
  • The table above shows the keys commonly supported; behavior can vary slightly depending on chart configuration (for example, stacked vs. grouped series) and platform.

Ensuring accessibility

The Chart component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.

The accessibility compliance of the Chart component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the Chart component with accessibility tools.

See also