React Data Grid Accessibility

The Syncfusion® Data Grid component followed the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.

The accessibility compliance for the grid 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 Data Grid component complies with WAI-ARIA design patterns to support accessibility requirements. It includes the following ARIA attributes:

Attributes	Purpose
`role=grid`	To represent the element containing the grid component.
`role=row`	To represent the element containing the cells of the row in the grid.
`role=rowgroup`	To represent the group of rows in the grid.
`role=columnheader`	To represent the cell in a row contains header information for a column in the grid.
`role=gridcell`	To represent a cell in the grid component.
`role=button`	To represent the element that acts as a button in the grid.
`role=search`	To represent the element that acts as a search region in the grid.
`role=presentation`	To represent the element to be not available for accessibility concerns.
`role=navigation`	To represent the element containing pager elements to navigate from one page to another.
`aria-colindex`	Defines the column index of the column with respect to the total number of columns within the grid.
`aria-rowindex`	Defines row index of the row with respect to the total number of rows within the grid.
`aria-selected`	Indicates the current selected state of the rows and cells in the grid.
`aria-sort`	Indicates whether the column is sorted in ascending or descending order.
`aria-busy`	Indicates that an element is still being updated, so assistive technologies should wait before announcing changes.

The Data Grid component is structured with a two-table architecture for its header and content. To enhance accessibility for screen readers, roles and ARIA attributes are incorporated for the grid parent and all its child elements. Although this architectural approach may have some limitations with accessibility checker tools. It's important to note that these limitations do not affect the readability of the grid content over screen readers.

The accessibility checker tools highlights the following known issues:

aria-required-children: This warning appears when rendering the grid without any features, as it contains textarea and grid content. Additionally, it appears when enabling features such as the toolbar.
An explicit ARIA 'role' is not valid for <tr> element within an ARIA role 'grid' per the ARIA in HTML specification. The same issue will be thrown for <th> and <td> elements.
Scrollable region must have keyboard access.
Form element must have labels specially having checkbox input.
The element with role "rowgroup" is not contained in or owned by an element with one of the following roles: 'grid', 'table'.

Keyboard shortcuts

The Data Grid component follows the keyboard shortcuts guideline, ensuring accessibility for user of assistive technologies (AT) and those who depend exclusively on keyboard navigation. The following keyboard shortcuts are supported by the grid component.

Windows	macOS	Action
`Tab`	`Tab`	Move focus to the next pager item.
`Shift + Tab`	`Shift + Tab`	Move focus to the previous pager item.
`Enter` / `Space`	`Enter` / `Space`	Select the focused page.
`PageUp` / `←`	`←`	Navigate to the previous page.
`PageDown` / `→`	`→`	Navigate to the next page.
`Home` / `Ctrl + Alt + PageUp`	`Fn + ←`	Navigate to the first page.
`End` / `Ctrl + Alt + PageDown`	`Fn + →`	Navigate to the last page.

Focus

Windows	macOS	Action
`Home`	`Fn + ←`	Move focus to the first cell of the current row.
`End`	`Fn + →`	Move focus to the last cell of the current row.
`Ctrl + Home`	`⌘ + Fn + ←`	Move focus to the first cell of the first row.
`Ctrl + End`	`⌘ + Fn + →`	Move focus to the last cell of the last row.
`↑`	`↑`	Move focus upward.
`↓`	`↓`	Move focus downward.
`→`	`→`	Move focus to the right.
`←`	`←`	Move focus to the left.
`Alt + J`	`⌥ + J`	Move focus to the entire grid.
`Alt + W`	`⌥ + W`	Move focus to the grid content element.

Selection

Windows	macOS	Action
`↑`	`↑`	Move focus upward from the current cell.
`↓`	`↓`	Move focus downward from the current cell.
`→`	`→`	Move focus to the right cell.
`←`	`←`	Move focus to the left cell.
`Shift + ↑`	`Shift + ↑`	Extend selection upward.
`Shift + ↓`	`Shift + ↓`	Extend selection downward.
`Enter`	`Enter`	Move focus downward from the current cell.
`Shift + Enter`	`Shift + Enter`	Move focus upward from the current cell.
`Esc`	`Esc`	Clear all selected rows.

Editing

Windows	macOS	Action
`F2`	`F2`	Start editing the selected row.
`Enter`	`Enter`	Save the current form.
`Insert`	`⌘ + ⌥ + Enter`	Create a new form.
`Esc`	`Esc`	Cancel the edit
`Delete`	`Delete`	Delete the selected record.
`Tab`	`Tab`	Move to the next editable cell.
`Shift + Tab`	`Shift + Tab`	Move to the previous editable cell.
`Shift + Enter`	`Shift + Enter`	Save the current form.

Sorting

Windows	macOS	Action
`Enter`	`Enter`	Sort the focused column (ascending/descending).
`Ctrl + Enter`	`⌘ + Enter`	Apply multi-column sorting.
`Shift + Enter`	`Shift + Enter`	Clear sorting for the focused column.

Prevent default key action behavior

Setting allowKeyboard to false effectively disables all built-in keyboard interactions within the grid component.

Ensuring accessibility

The Data Grid component's accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing. The accessibility compliance of the grid is shown in the following sample.