Accessibility customization in Angular Chart component

24 Dec 202424 minutes to read

The Syncfusion® Angular Chart component is structured to visualize data in a graphical manner. It provides robust customization options for accessibility, allowing you to enhance the user experience for those with disabilities. The main attributes of the Angular Chart component’s accessibility customization are briefly explained in this section.

The chart component has a number of characteristics that enable accessibility features to be customized, including:

accessibilityDescription - Provides a text description for the chart, improving support for screen readers.
accessibilityRole - Specifies the role of the chart, helping screen readers to identify the element appropriately.
focusable - Allows the chart to receive focus, making it accessible via keyboard navigation.
focusBorderColor - Sets the color of the focus border, enhancing visibility when the chart is focused.
focusBorderMargin - Defines the margin around the focus border.
focusBorderWidth - Specifies the width of the focus border.
tabIndex - Specifies the tab order of the chart element, enabling efficient keyboard navigation.

app.component.ts
main.ts
import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, LineSeriesService, LegendService, TooltipService, DataLabelService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { chartData } from './datasource';

@Component({
    imports: [ChartModule],
    providers: [CategoryService, LineSeriesService, LegendService, TooltipService, DataLabelService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title' 
    [tooltip]='tooltip' [legendSettings]='legendSettings' [accessibility]='accessibility' focusBorderColor='#FF0000' 
    focusBorderWidth=3 focusBorderMargin=5>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Line' xName='month' yName='sales' name='Sales' [marker]='marker'></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;
    public marker?: Object;
    ngOnInit(): void {
        this.chartData = chartData;
        this.primaryXAxis = {
            valueType: 'Category'
        };
        this.primaryYAxis = {
            labelFormat: '${value}K'
        };
        this.title = 'Sales Analysis';
        this.tooltip = { enable: true };
        this.legendSettings = { visible: true };
        this.accessibility = {
            accessibilityDescription: 'A line chart displaying the sales analysis for each month.',
            accessibilityRole: 'chart'
        };
        this.marker = { visible: true, dataLabel: { visible: true } };
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Series

The series supports the customization of accessibility for data points, allowing key characteristics to be adjusted for enhanced accessibility, such as:

accessibilityDescription - Provides a text description for the series root element, enhancing support for screen readers.
accessibilityDescriptionFormat - Specifies a format for the accessibility description of each point in the series, allowing dynamic content. The format string can include the placeholders such as ${series.name}, ${point.x}, ${point.y}, ${point.high}, etc. For example, the format “${series.name} : ${point.x}” displays the series name and x-value of the point in the accessibility description. Data point’s values like high, low, open, and close are applicable based on the series types.
accessibilityRole - Specifies the role of the series, helping screen readers to identify the element appropriately.
focusable - Allows the series to receive focus, making it accessible via keyboard navigation.
tabIndex - Specifies the tab order of the series element, enabling efficient keyboard navigation.

app.component.ts
main.ts
import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, ColumnSeriesService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { columnData } from './datasource';

@Component({
    imports: [ChartModule],
    providers: [CategoryService, ColumnSeriesService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title'>
        <e-series-collection>
            <e-series [dataSource]='columnData' type='Column' xName='country' yName='gold' [accessibility]='accessibility'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public primaryYAxis?: Object;
    public columnData?: Object[];
    public title?: string;
    public accessibility?: Object;
    ngOnInit(): void {
        this.columnData = columnData;
        this.primaryXAxis = {
            valueType: 'Category',
            title: 'Countries'
        };
        this.primaryYAxis = {
            minimum: 0,
            maximum: 80,
            interval: 20,
            title: 'Medals'
        };
        this.title = 'Olympic Medals';
        this.accessibility = {
            accessibilityDescription: 'This series displays the number of gold medals won by each country in the Olympics.',
            accessibilityRole: 'series',
            accessibilityDescriptionFormat: 'The country ${point.x} won ${point.y} gold medals.'
        };
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Title and subtitle

In the Angular chart component, the titleStyle and subTitleStyle attributes allow you to customize the accessibility of the chart’s title and subtitle. The following accessibility properties in titleStyle and subTitleStyle can be customized for accessibility:

accessibilityDescription - Provides a text description for the chart title and subtitle, enhancing support for screen readers.
accessibilityRole - Specifies the role of the chart title and subtitle, helping screen readers to identify the element appropriately.
focusable - Enables or disables the keyboard navigation focus for the title and subtitle.
tabIndex - Specifies the tab order of the title and subtitle element, enabling efficient keyboard navigation.

app.component.ts
main.ts
import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, ColumnSeriesService, LegendService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { columnData } from './datasource';

@Component({
    imports: [ChartModule],
    providers: [CategoryService, ColumnSeriesService, LegendService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title' [titleStyle]='titleStyle' [subTitle]='subTitle' [subTitleStyle]='subTitleStyle' [legendSettings]='legendSettings'>
        <e-series-collection>
            <e-series [dataSource]='columnData' type='Column' xName='country' yName='gold' name='Gold'></e-series>
            <e-series [dataSource]='columnData' type='Column' xName='country' yName='silver' name='Silver'></e-series>
            <e-series [dataSource]='columnData' type='Column' xName='country' yName='bronze' name='Bronze'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public primaryYAxis?: Object;
    public columnData?: Object[];
    public title?: string;
    public titleStyle?: Object;
    public subTitle?: string;
    public subTitleStyle?: Object;
    public legendSettings?: Object;
    ngOnInit(): void {
        this.columnData = columnData;
        this.primaryXAxis = {
            valueType: 'Category',
            title: 'Countries',
            labelPlacement: 'OnTicks'
        };
        this.primaryYAxis = {
            minimum: 0,
            maximum: 80,
            interval: 20,
            title: 'Medals'
        };
        this.title = 'Olympic Medals Comparison by Country';
        this.subTitle = 'Medal Comparison';
        this.titleStyle = {
            accessibility: {
                accessibilityDescription: 'This chart shows the number of gold, silver, and bronze medals won by different countries in the Olympics.',
                accessibilityRole: 'heading'
            }
        };
        this.subTitleStyle = {
            accessibility: {
                accessibilityDescription: 'The subtitle provides additional context for the Olympic medal distribution chart.',
                accessibilityRole: 'heading'
            }
        };
        this.legendSettings = { visible: true };
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Annotations

The annotations property allows you to add annotations to the chart in specific regions. The following accessibility properties in annotations can be customized for accessibility:

accessibilityDescription - Provides a text description for the annotation, enhancing support for screen readers.
accessibilityRole - Specifies the role of the annotation, helping screen readers to identify the element appropriately.
focusable - Specifies whether annotations are focusable via keyboard navigation.
tabIndex - Specifies the tab order of the annotation element, enabling efficient keyboard navigation.

app.component.ts
main.ts
import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, ColumnSeriesService, ChartAnnotationService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { columnData } from './datasource';

@Component({
    imports: [ChartModule],
    providers: [CategoryService, ColumnSeriesService, ChartAnnotationService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title'>
        <e-annotations>
            <e-annotation  content='<div style="border: 1px solid #000; background-color: #f8f8f8; padding: 5px; border-radius: 4px; font-size: 12px; font-weight: bold;">70 Gold Medals</div>' coordinateUnits='Point' x='France' y=55 [accessibility]='accessibility'>
            </e-annotation>
        </e-annotations>
        <e-series-collection>
            <e-series [dataSource]='columnData' type='Column' xName='country' yName='gold'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public primaryYAxis?: Object;
    public columnData?: Object[];
    public title?: string;
    public accessibility?: Object;
    ngOnInit(): void {
        this.columnData = columnData;
        this.primaryXAxis = {
            valueType: 'Category',
            title: 'Countries'
        };
        this.primaryYAxis = {
            title: 'Medals'
        };
        this.title = 'Olympic Medals';
        this.accessibility = {
            accessibilityDescription: 'Annotation indicating that France has won 70 Gold Medals.',
            accessibilityRole: 'note',
            focusable: true
        };
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Trendline

The trendlines property allows you to display trends in the data. The following accessibility properties in trendlines can be customized for accessibility:

accessibilityDescription - Provides a text description for the trendline, enhancing support for screen readers.
accessibilityRole - Specifies the role of the trendline, helping screen readers to identify the element appropriately.
focusable - Specifies whether trendlines are focusable via keyboard navigation.
tabIndex - Specifies the tab order of the trendline element, enabling efficient keyboard navigation.

app.component.ts
main.ts
import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { ScatterSeriesService, TrendlinesService, TooltipService, LineSeriesService, LegendService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';

let data: Object[] = [];
let yValue: number[] = [7.66, 8.03, 8.41, 8.97, 8.77, 8.20, 8.16, 7.89, 8.68, 9.48, 10.11, 11.36, 12.34, 12.60, 12.95, 13.91, 16.21, 17.50, 22.72, 28.14, 31.26, 31.39, 32.43, 35.52, 36.36,
    41.33, 43.12, 45.00, 47.23, 48.62, 46.60, 45.28, 44.01, 45.17, 41.20, 43.41, 48.32, 45.65, 46.61, 53.34, 58.53];
let point: Object;
let i: number; let j: number = 0;
for (i = 1973; i <= 2013; i++) {
    point = { x: i, y: yValue[j] };
    data.push(point);
    j++;
}
@Component({
    imports: [ChartModule],
    providers: [ScatterSeriesService, TrendlinesService, TooltipService, LineSeriesService, LegendService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id='chartcontainer' [title]='title' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [chartArea]= 'chartArea' [tooltip]='tooltip' [legendSettings]='legendSettings'>
            <e-series-collection>
                <e-series [dataSource]='chartData' type='Scatter' xName='x' yName='y' fill='#0066FF' name='Apple Inc'>
                     <e-trendlines>
                        <e-trendline type='Linear' [accessibility]='accessibility'>
                        </e-trendline>
                    </e-trendlines>
                    </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 chartArea?: Object;
    public tooltip?: Object;
    public accessibility?: Object;
    public legendSettings?: Object;
    ngOnInit(): void {
        this.chartData = data;
        this.primaryXAxis = {
            title: 'Months'
        };
        this.primaryYAxis = {
            title: 'Rupees against Dollars',
            interval: 5
        };
        this.title = 'Historical Indian Rupee Rate (INR USD)';
        this.chartArea = { border: { width: 0 } };
        this.tooltip = { enable: true };
        this.accessibility = {
            accessibilityDescription: 'A linear trendline representing the general trend of the historical Indian Rupee rate against the US Dollar.',
            accessibilityRole: 'line'
        };
        this.legendSettings = { visible: false };
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Zooming

The zoomSettings attributes allow you to adjust the chart’s zooming capability. The following accessibility properties in zoomSettings offer the parameters for accessibility customization:

accessibilityDescription - Provides a text description for the zoom toolkit items, enhancing support for screen readers.
accessibilityRole - Specifies the role of the zoom toolkit items, helping screen readers to identify the element appropriately.
focusable - Specifies whether zoom toolkit items are focusable via keyboard navigation.
tabIndex - Specifies the tab order of the zooming element, enabling efficient keyboard navigation.

app.component.ts
main.ts
import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { DateTimeService, AreaSeriesService, LegendService, ZoomService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { series1 } from './datasource';

@Component({
    imports: [ChartModule],
    providers: [DateTimeService, AreaSeriesService, LegendService, ZoomService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [title]='title' [zoomSettings]='zoomSettings' [legendSettings]='legendSettings'>
        <e-series-collection>
            <e-series [dataSource]='chartData' type='Area' xName='x' yName='y' name='Product X' [border]='border' [animation]='animation'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public chartData?: Object[];
    public title?: string;
    public border?: Object;
    public animation?: Object;
    public zoomSettings?: Object;
    public legendSettings?: Object;
    ngOnInit(): void {
        this.chartData = series1;
        this.primaryXAxis = {
            valueType: 'DateTime'
        };
        this.zoomSettings = {
            enableMouseWheelZooming: true,
            enablePinchZooming: true,
            enableSelectionZooming: true,
            accessibility: {
                accessibilityDescription: 'This allows users to zoom in and out of the chart using mouse wheel, pinch gestures, or selection box.',
                accessibilityRole: 'zoom'
            }
        };
        this.title = 'Sales History of Product X';
        this.legendSettings = { visible: false };
        this.border = { width: 0.5, color: '#00bdae' };
        this.animation = { enable: false };
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Technical indicators

The indicators property allows you to analyze the trends and patterns in the data. The following accessibility properties in indicators can be customized for accessibility:

accessibilityDescription - Provides a text description for the indicators, enhancing support for screen readers.
accessibilityRole - Specifies the role of the indicators, helping screen readers to identify the element appropriately.
focusable - Specifies whether indicators are focusable via keyboard navigation.
tabIndex - Specifies the tab order of the indicators element, enabling efficient keyboard navigation.

app.component.ts
main.ts
import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CandleSeriesService, LineSeriesService, AccumulationDistributionIndicatorService, DateTimeService, CrosshairService, TooltipService, LegendService, IAxisLabelRenderEventArgs, TechnicalIndicatorModel } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { chartData } from './datasource';

@Component({
    imports: [ChartModule],
    providers: [CandleSeriesService, LineSeriesService, AccumulationDistributionIndicatorService, DateTimeService, CrosshairService, TooltipService, LegendService],
    standalone: true,
    selector: 'app-container',
    template:
        `<ejs-chart id='chartcontainer' style="display:block;" [title]='title' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'
              [axes]='axes' [chartArea]='chartArea' [crosshair]='crosshair' [tooltip]='tooltip' (axisLabelRender)='axisLabelRender($event)' [indicators]='indicators' [legendSettings]='legendSettings'>
            <e-series-collection>
                <e-series [dataSource]='chartData' type='Candle' width=2 xName='x' high='high' low='low' open='open' close='close' volume='volume' name='Apple Inc' [animation]='animation'></e-series>
            </e-series-collection>
        </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public primaryYAxis?: Object;
    public axes?: Object[];
    public chartData?: Object[];
    public crosshair?: Object;
    public title?: string;
    public tooltip?: Object;
    public chartArea?: Object;
    public accessibility?: Object;
    public animation?: Object;
    public indicators?: TechnicalIndicatorModel[];
    public legendSettings?: Object;
    public axisLabelRender(args: IAxisLabelRenderEventArgs): void {
        if (args.axis.name === 'secondary') {
            let value: number = Number(args.text) / 1000000000;
            args.text = String(value) + 'bn';
        }
    };

    ngOnInit(): void {
        this.chartData = chartData;
        this.primaryXAxis = {
            title: 'Months',
            valueType: 'DateTime',
            intervalType: 'Months',
            majorGridLines: { width: 0 },
            crosshairTooltip: { enable: true }
        };
        this.primaryYAxis = {
            title: 'Price (Million Dollars)',
            minimum: 30,
            maximum: 180,
            interval: 30,
        };
        this.axes = [{
            name: 'secondary',
            minimum: -7000000000, maximum: 5000000000,
            interval: 6000000000,
            majorGridLines: { width: 0 },
            opposedPosition: true
        }];
        this.title = 'AAPL - 2016/2017';
        this.crosshair = { enable: true, lineType: 'Vertical' };
        this.chartArea = {
            border: { width: 0 }
        };
        this.tooltip = { enable: true, shared: true };
        this.legendSettings = { visible: false };
        this.indicators = [
            {
                type: 'AccumulationDistribution',
                field: 'Close',
                yAxisName: 'secondary',
                xName: 'x',
                fill: 'blue',
                period: 3,
                seriesName: 'Apple Inc',
                animation: { enable: true },
                accessibility: {
                    accessibilityDescription: 'The Accumulation Distribution indicator is used to assess the buying and selling pressure of Apple Inc. stock.',
                    accessibilityRole: 'indicator'
                }
            }
        ];
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Legend

The legendSettings provide information about the series shown in the chart. The following accessibility properties in legendSettings can be used to alter the accessibility of the chart’s legend:

accessibilityDescription - Provides a text description for the legend root element, enhancing support for screen readers.
accessibilityRole - Specifies the role of the legend items to screen readers, providing appropriate context.
focusable - Specifies whether legend items are focusable via keyboard navigation.
tabIndex - Specifies the tab order of the legend element, enabling efficient keyboard navigation.

app.component.ts
main.ts
import { ChartModule } from '@syncfusion/ej2-angular-charts';
import { CategoryService, ColumnSeriesService, LegendService } from '@syncfusion/ej2-angular-charts';
import { Component, OnInit } from '@angular/core';
import { columnData } from './datasource';

@Component({
    imports: [ChartModule],
    providers: [CategoryService, ColumnSeriesService, LegendService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title' [legendSettings]='legendSettings'>
        <e-series-collection>
            <e-series [dataSource]='columnData' type='Column' xName='country' yName='gold' name='Gold'></e-series>
            <e-series [dataSource]='columnData' type='Column' xName='country' yName='silver' name='Silver'></e-series>
            <e-series [dataSource]='columnData' type='Column' xName='country' yName='bronze' name='Bronze'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public primaryXAxis?: Object;
    public primaryYAxis?: Object;
    public columnData?: Object[];
    public title?: string;
    public legendSettings?: Object;
    ngOnInit(): void {
        this.columnData = columnData;
        this.primaryXAxis = {
            valueType: 'Category',
            title: 'Countries'
        };
        this.primaryYAxis = {
            minimum: 0,
            maximum: 80,
            interval: 20,
            title: 'Medals'
        };
        this.title = 'Olympic Medals';
        this.legendSettings = {
            visible: true,
            accessibility: {
                accessibilityDescription: 'Legend displaying medal counts by country for Gold, Silver, and Bronze.',
                accessibilityRole: 'presentation'
            }
        };
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));