Accessibility in Syncfusion React Components

27 Feb 202524 minutes to read

Accessibility overview

Accessibility in components refers to the practice of designing and building user interface elements in a way that makes them accessible to users with disabilities. This can include a variety of things, such as making sure that text is high-contrast and easy to read, providing alternative text for images, and designing controls and interactions that can be used with a keyboard or assistive technology.

Accessibility standards

The component is said to be accessible when it is constructed in accordance with certain standards that are required to make it accessible.

The accessibility of the components consists of the following standards and aspects:

  • ADA - A law to ensure that people with disabilities have the same opportunities and access as people without disabilities.

  • WCAG 2.2 - The Web Content Accessibility Guidelines (WCAG) provide guidelines developed by the World Wide Web Consortium (W3C) to ensure web content is accessible to people with disabilities. WCAG 2.2 establishes a framework of accessibility principles and their associated success criteria. The level of accessibility conformance achieved by a web application is determined by the extent to which it meets these success criteria, categorized into three levels: A, AA, and AAA.

  • Section 508 - It is a set of guidelines for making electronic and information technology (EIT) accessible to people with disabilities. These standards apply to federal agencies in the United States, and they are based on the Web Content Accessibility Guidelines (WCAG).

  • WAI-ARIA - WAI-ARIA stands for “Web Accessibility Initiative - Accessible Rich Internet Applications.” It is a set of technical specifications and guidelines developed by the World Wide Web Consortium (W3C) as part of the Web Accessibility Initiative (WAI). WAI-ARIA is designed to enhance the accessibility of dynamic web content, particularly web applications and rich internet applications (RIAs), for people with disabilities. WAI-ARIA provides a set of roles, states, and properties that can be added to HTML elements to provide additional context and information about the purpose and behavior of those elements. This can help assistive technologies better understand and interpret web content and interact with web applications.

  • Keyboard navigation - It refers to the ability to use a keyboard to interact with and navigate through a user interface. It is an important aspect of web accessibility, as it allows people who cannot use a mouse or other pointing device to access and use web content and applications.

Syncfusion React components adhere to these established standards.

Accessibility compliance

The accessibility support provided by Syncfusion React components is based on a collection of methodologies for adhering to and applying recognized standards and technical specifications to ensure an intuitive experience for people with disabilities.

There are several methodologies of accessibility validation that can be performed on the Syncfusion React components, such as:

  • The WAI-ARIA patterns are followed by the Syncfusion React components to enable appreciable accessibility.

  • Each React component is subjected to manual testing with a screen reader and also automated test cases to ensure the component’s required attributes.

  • Attributes are allocated and updated correctly during interaction as well. Each component has been assigned a distinct Role attribute and its own set of ARIA attributes defined by the WCAG 2.2 specification.

In addition to the methodologies mentioned above, Syncfusion React components are constructed to support the following accessibility aspects.

Screen reader support

A screen reader allows people who are blind or visually impaired to use a computer by reading aloud the text that is displayed on the screen. Syncfusion React components followed the WAI-ARIA standards to work properly in the screen readers such as Narrator for Windows and Embedded VoiceOver for MAC.

Right-To-Left support

Right-to-Left (RTL) support allows applications to effectively communicate with users who use languages that are written from right to left, such as Arabic, Hebrew, etc. Syncfusion React components support the Right-to-Left feature. Refer to the Right-to-Left documentation to learn more about this support.

Color contrast

Syncfusion React components come equipped with predefined themes that guarantee the presence of satisfactory color contrast, benefiting individuals with visual impairments.

Mobile device support

Syncfusion React components are more user-friendly and accessible to individuals using mobile devices, including those with disabilities. These are designed to be responsive, adaptable to various screen sizes and orientations, and touch-friendly.

Keyboard navigation support

Syncfusion React components support keyboard navigation, allowing users who rely on alternate methods to effortlessly navigate and interact with the component.

Ensuring accessibility

Ensuring the accessibility of Syncfusion React components is crucial for making the product inclusive and user-friendly for individuals with disabilities. This process involves various types of accessibility testing, including:

  • Automated testing: The Syncfusion React component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools.

  • Manual testing: This type of testing involves manually evaluating the Syncfusion React components. During manual accessibility testing, testers will ensure accessibility using the screen readers such as Narrator for Windows and Embedded VoiceOver for MAC.

Syncfusion React components will keep improving when there is anything required. It also involves client feedback to make the component more accessible.

Voluntary Product Accessibility Template

The Voluntary Product Accessibility Template (VPAT) provides a structured format to document how information and communication technology (ICT) products and services comply with accessibility standards. This template helps organizations clearly and effectively communicate their conformance with standards such as Section 508, WCAG 2.2, and EN 301 549.

Download the Latest VPAT Document

To review the accessibility conformance of Syncfusion products, you can download the latest version of the Syncfusion VPAT document here: VPAT Document

This document provides detailed information on how Syncfusion products meet accessibility requirements, ensuring they are inclusive and usable for all individuals, including those with disabilities.

Accessibility support for specific components

Syncfusion React components are designed to ensure compliance with key accessibility standards, including Section 508, WAI-ARIA, WCAG 2.2, and keyboard navigation. Below, you’ll find control-specific documentation that provides detailed guidance on how each control meets these standards.

Component Section 508 WCAG 2.2 Keyboard Navigation Accessibility Documentation
DataGrid Yes AA Yes Documentation
Pivot Table Yes AA Yes Documentation
Tree Grid Yes AA Yes Documentation
Spreadsheet Yes AA Yes Documentation
In-place Editor Yes AA Yes Documentation
PDF Viewer Yes AA Yes Documentation
RichTextEditor Yes AA Yes Documentation
Word Processor Yes AA Yes Documentation
Image Editor Yes AA Yes Documentation
Dialog Yes AA Yes Documentation
ListView Yes AA Yes Documentation
Tooltip Yes AA Yes Documentation
Splitter Yes AA Yes Documentation
Dashboard Layout Yes AA NA Documentation
Accumulation Chart Yes AA Yes Documentation
Charts Yes AA Yes Documentation
Stock Chart Yes AA Yes Documentation
Circular Gauge Yes AA NA Documentation
Diagram Yes AA Yes Documentation
HeatMap Chart Yes AA NA Documentation
Linear Gauge Yes AA NA Documentation
Maps Yes AA Yes Documentation
Range Selector Yes AA Yes Documentation
Smith Chart Yes AA Yes Documentation
Sparkline Charts Yes AA Yes Documentation
TreeMap Yes AA NA Documentation
Bullet Chart Yes AA Yes Documentation
Kanban Yes AA Yes Documentation
Button Yes AA Yes Documentation
Button Group Yes AA Yes Documentation
Dropdown Menu Yes AA Yes Documentation
Progress Button Yes AA Yes Documentation
Split Button Yes AA Yes Documentation
Chips Yes AA Yes Documentation
FAB Yes AA Yes Documentation
Speed Dial Yes AA Yes Documentation
Calendar Yes AA Yes Documentation
DatePicker Yes AA Yes Documentation
DateRangePicker Yes AA Yes Documentation
DateTime Picker Yes AA Yes Documentation
TimePicker Yes AA Yes Documentation
Gantt Chart Yes AA Yes Documentation
TextBox Yes AA Yes Documentation
Input Mask Yes AA Yes Documentation
Masked TextBox Yes AA Yes Documentation
Numeric TextBox Yes AA Yes Documentation
Radio Button Yes AA Yes Documentation
CheckBox Yes AA Yes Documentation
Color Picker Yes AA Yes Documentation
File Upload Yes AA Yes Documentation
Range Slider Yes AA Yes Documentation
Toggle Switch Button Yes AA Yes Documentation
Signature Yes AA Yes Documentation
Rating Yes AA Yes Documentation
Query Builder Yes AA Yes Documentation
Accordion Yes AA Yes Documentation
AppBar Yes AA Yes Documentation
Breadcrumb Yes AA Yes Documentation
Carousel Yes AA Yes Documentation
Context Menu Yes AA Yes Documentation
Menu Bar Yes AA Yes Documentation
Sidebar Yes AA Yes Documentation
Tabs Yes AA Yes Documentation
Toolbar Yes AA Yes Documentation
Ribbon Yes AA Yes Documentation
TreeView Yes AA Yes Documentation
File Manager Yes AA Yes Documentation
Stepper Yes AA Yes Documentation
Message Yes AA Yes Documentation
Toast Yes AA NA Documentation
Progress Bar Yes AA Yes Documentation
Skeleton Yes AA Yes Documentation