Data Grid - Accessibility

Learn how the Data Grid implements accessibility features and guidelines, including keyboard navigation that follows international standards.

Guidelines

Common conformance guidelines for accessibility include:

• 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 exceeds the basic criteria for accessibility and is a common target for most organizations, so this is what we aim to support.

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

Density

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

• standard (default)
• compact
• comfortable

Set the density programmatically

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',
     }}
   />
   

   CopyCopied(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)}
     />
   );
   

   CopyCopied(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.

You can create a custom toolbar with a density selector that allows users to change the density of the Data Grid, as shown in the demo below.

See the Toolbar component—Settings menu for an example of how to create a settings menu that stores user preferences in local storage.

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

Selection

Sorting

Group and pivot

API

• DataGrid
• DataGridPro
• DataGridPremium