Accessibility customization

19 Dec 202410 minutes to read

The Syncfusion® React Accumulation Chart control 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 React Accumulation Chart control’s accessibility customization are briefly explained in this section.

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

  • accessibilityDescription - Provides a text description for the accumulation chart, improving support for screen readers.
  • accessibilityRole - Specifies the role of the accumulation chart, helping screen readers to identify the element appropriately.
  • focusable - Allows the accumulation chart to receive focus, making it accessible via keyboard navigation.
  • focusBorderColor - Sets the color of the focus border, enhancing visibility when the accumulation chart is focused.
  • focusBorderMargin - Defines the margin around the focus border.
  • focusBorderWidth - Specifies the width of the focus border.
  • tabIndex - Specifies the tab order for the accumulation chart element, enabling efficient keyboard navigation.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationLegend, PieSeries } from '@syncfusion/ej2-react-charts';
import { data } from '../datasource.ts';

function App() {

  const legendSettings = { visible: true };
  const accessibility = {
    accessibilityDescription: 'Pie chart representing the distribution of data across months.',
    accessibilityRole: 'chart'
  };

  return (
    <AccumulationChartComponent id="container" legendSettings={legendSettings} accessibility={accessibility} focusBorderColor="#FF0000" focusBorderWidth={3} focusBorderMargin={5}>
      <Inject services={[AccumulationLegend, PieSeries]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective dataSource={data} xName='x' yName='y'>
        </AccumulationSeriesDirective>
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  )
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationLegend, LegendSettingsModel, AccessibilityModel, PieSeries } from '@syncfusion/ej2-react-charts';
import { data } from '../datasource.ts';

function App() {

  const legendSettings: LegendSettingsModel = { visible: true };
  const accessibility: AccessibilityModel = {
    accessibilityDescription: 'Pie chart representing the distribution of data across months.',
    accessibilityRole: 'chart'
  };

  return (
    <AccumulationChartComponent id="container" legendSettings={legendSettings} accessibility={accessibility} focusBorderColor="#FF0000" focusBorderWidth={3} focusBorderMargin={5}>
      <Inject services={[AccumulationLegend, PieSeries]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective dataSource={data} xName='x' yName='y'>
        </AccumulationSeriesDirective>
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  )
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

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.
  • 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.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, PyramidSeries, AccumulationLegend } from '@syncfusion/ej2-react-charts';
import { data } from '../datasource.ts';

function App() {

  const legendSettings = { visible: false };
  const accessibility = {
    accessibilityDescription: 'This pyramid chart represents the sales distribution of cars by region, with each section representing a different region and its respective sales percentage.',
    accessibilityRole: 'presentation'
  };

  return (
    <AccumulationChartComponent id="container" title='Sales Distribution of Car by Region' legendSettings={legendSettings}>
      <Inject services={[PyramidSeries, AccumulationLegend]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective dataSource={data} xName='x' yName='y' type='Pyramid' accessibility={accessibility}>
        </AccumulationSeriesDirective>
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  )
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, PyramidSeries, AccessibilityModel, AccumulationLegend, LegendSettingsModel } from '@syncfusion/ej2-react-charts';
import { data } from '../datasource.ts';

function App() {

  const legendSettings: LegendSettingsModel = { visible: false };
  const accessibility: AccessibilityModel = {
    accessibilityDescription: 'This pyramid chart represents the sales distribution of cars by region, with each section representing a different region and its respective sales percentage.',
    accessibilityRole: 'presentation'
  };

  return (
    <AccumulationChartComponent id="container" title='Sales Distribution of Car by Region' legendSettings={legendSettings}>
      <Inject services={[PyramidSeries, AccumulationLegend]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective dataSource={data} xName='x' yName='y' type='Pyramid' accessibility={accessibility}>
        </AccumulationSeriesDirective>
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  )
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

Legend

The legendSettings provide information about the series shown in the accumulation chart. The following accessibility properties in legendSettings can be used to alter the accessibility of the accumulation 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.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationLegend, PieSeries } from '@syncfusion/ej2-react-charts';
import { data } from '../datasource.ts';

function App() {

  const legendSettings = { 
    visible: true,
    accessibility: {
      accessibilityDescription: 'The legend identifies the data categories represented in the chart and associates them with their corresponding labels.',
      accessibilityRole: 'group'
    } 
  };

  return (
    <AccumulationChartComponent id="container" legendSettings={legendSettings}>
      <Inject services={[AccumulationLegend, PieSeries]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective dataSource={data} xName='x' yName='y'>
        </AccumulationSeriesDirective>
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  )
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationLegend, LegendSettingsModel, PieSeries } from '@syncfusion/ej2-react-charts';
import { data } from '../datasource.ts';

function App() {

  const legendSettings: LegendSettingsModel = { 
    visible: true,
    accessibility: {
      accessibilityDescription: 'The legend identifies the data categories represented in the chart and associates them with their corresponding labels.',
      accessibilityRole: 'group'
    } 
  };

  return (
    <AccumulationChartComponent id="container" legendSettings={legendSettings}>
      <Inject services={[AccumulationLegend, PieSeries]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective dataSource={data} xName='x' yName='y'>
        </AccumulationSeriesDirective>
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent>
  )
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));