Data Grid - Accessibility

The Data Grid has complete accessibility support, including built-in keyboard navigation that follows international standards.

Guidelines

The most commonly encountered conformance guidelines for accessibility are:

• Globally accepted standard: WCAG
• US:
  • ADA - US Department of Justice
  • Section 508 - US federal agencies
• Europe: EAA (European Accessibility Act)

WCAG 2.1 has three levels of conformance: A, AA, and AAA. Level AA meets the most commonly encountered conformance guidelines. This is the most common target for organizations so what we aims to support very well.

The WAI-ARIA Authoring Practices provide valuable information on how to optimize the accessibility of a data grid.

Density

You can change the density of the rows and the column header.

Density selection from the toolbar

To enable the density selection from the toolbar, you can do one of the following:

1. Enable the default toolbar component by passing the slots.toolbar prop to the Data Grid.
2. Create a specific toolbar containing only the GridToolbarDensitySelector component and apply it using the toolbar property in the Data Grid's slots prop.

The user can then change the density of the Data Grid by using the density selection menu from the toolbar, as the following demo illustrates:

To disable the density selection menu, pass the disableDensitySelector prop to the Data Grid.

Set the density programmatically

The Data Grid exposes the density prop which supports the following values:

• standard (default)
• compact
• comfortable

You can set the density programmatically in one of the following ways:

1. Uncontrolled – initialize the density with the initialState.density prop.

   <DataGrid
     initialState={{
       density: 'compact',
     }}
   />
   

   (or $keyC)

2. Controlled – pass the density and onDensityChange props. For more advanced use cases, you can also subscribe to the densityChange grid event.

   const [density, setDensity] = React.useState<GridDensity>('compact');
   
   return (
     <DataGrid
       density={density}
       onDensityChange={(newDensity) => setDensity(newDensity)}
     />
   );
   

   (or $keyC)

The density prop applies the values determined by the rowHeight and columnHeaderHeight props, if supplied. The user can override this setting with the optional toolbar density selector.

The following demo shows a Data Grid with the controlled density set to compact and outputs the current density to the console when the user changes it using the density selector from the toolbar:

Keyboard navigation

The Data Grid listens for keyboard interactions from the user and emits events in response to key presses within cells.

Tab sequence

According to WAI-ARIA Authoring Practices, only one of the focusable elements contained by a composite widget should be included in the page tab sequence. For an element to be included in the tab sequence, it needs to have a tabIndex value of zero or greater.

When a user focuses on a Data Grid cell, the first inner element with tabIndex={0} receives the focus. If there is no element with tabIndex={0}, the focus is set on the cell itself.

The two Data Grids below illustrate how the user experience is impacted by improper management of the page tab sequence, making it difficult to navigate through the data set:

If you customize cell rendering with the renderCell method, you become responsible for removing focusable elements from the page tab sequence. Use the tabIndex prop passed to the renderCell params to determine if the rendered cell has focus and if, as a result, the inner elements should be removed from the tab sequence:

renderCell: (params) => (
  <div>
    <Link tabIndex={params.tabIndex} href="/#">
      more info
    </Link>
  </div>
);

Navigation

The following key assignments apply to Windows and Linux users.

On macOS:

• replace Ctrl with ⌘ Command
• replace Alt with ⌥ Option

Selection

Sorting

Group and pivot

API

• DataGrid
• DataGridPro
• DataGridPremium