React Chart Accessibility
The Chart component followed the accessibility guidelines and standards, including , Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.
The accessibility compliance for the Chart component is outlined below.
| Accessibility Criteria | Compatibility |
|---|---|
| WCAG 2.2 Support | |
| Section 508 Support | |
| Screen Reader Support | |
| Right-To-Left Support | |
| Color Contrast | |
| Mobile Device Support | |
| Keyboard Navigation Support | |
| Accessibility Validation | |
| Axe-core Accessibility Validation |
- All features of the component meet the requirement.
- Some features of the component do not meet the requirement.
- The component does not meet the requirement.
WAI-ARIA attributes
The Chart component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the Chart component:
| Attributes | Purpose |
|---|---|
role=img | To represent the element act as path element in chart. |
role=region | To represent the element act as group element in chart. |
role=text | To represent the element act as text element in chart. |
Accessibility customization in React Chart component
The Syncfusion® React 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 Chart control’s accessibility customization are briefly explained in this section.
The chart control has a number of characteristics that enable accessibility features to be customized, including:
ariaLabel- Provides a text description for the chart, improving support for screen readers.role- 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.color- Sets the color of the focus border, enhancing visibility when the chart is focused.offset- Defines the margin around the focus border.width- Specifies the width of the focus border.tabIndex- Specifies the tab order of the chart element, enabling efficient keyboard navigation.