Data Grid - Accessibility

The Data Grid has complete accessibility support. For instance, every cell is accessible using the keyboard.

Guidelines

The most commonly encountered conformance guidelines for accessibility are:

WCAG - Globally accepted standard
ADA - US Department of Justice
Section 508 - US federal agencies

WCAG 2.0 has three levels of conformance; A, AA, and AAA (in order of conformance). As meeting WCAG 2.0 level AA guidelines also meets the ADA and Section 508 standards, it's likely the standard that most organizations will want to target.

The WAI-ARIA authoring practices provides valuable insight on how to make the grid highly accessible.

Density

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

Density selector

To enable the density selector, you need to compose a toolbar containing the GridToolbarDensitySelector component and apply it using the Toolbar property in the grid components prop.

The user can change the density of the data grid by using the density selector from the toolbar.

<DataGrid
  {...data}
  components={{
    Toolbar: CustomToolbar,
  }}
/>

To hide the density selector add the disableDensitySelector prop to the data grid.

Density prop

The vertical density of the data grid can be set using the density prop. The density prop applies the values determined by the rowHeight and headerHeight props if supplied. The user can override this setting with the toolbar density selector if provided.

<DataGrid
  {...data}
  density="compact"
  components={{
    Toolbar: CustomToolbar,
  }}
/>

The grid responds to keyboard interactions from the user and emits events when key presses happen on the grid cells.

Tab sequence

According to WCAG, only one of the focusable elements contained by the grid 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 cell of the grid is focused, the first inner element with tabIndex=0 will receive the focus. If there is no element with tabIndex=0, the focus is set on the cell itself.

In the example below, the first grid does not remove links from the tab sequence, which implies having to pass through all the links before accessing the pagination controls. This behavior makes it complicated to navigate between elements when using large datasets.

Without focus management

Correct focus management

If you are customizing cell rendering with the renderCell method, you become responsible for removing focusable elements from the page tab sequence. To do so, use the tabIndex prop passed to the renderCell params to know if the rendered cell has focus and so if the inner elements should be removed from the tab sequence.

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

Use the arrow keys to move the focus.

Keys	Description
`Arrow Left`	Navigate between cell elements
`Arrow Bottom`	Navigate between cell elements
`Arrow Right`	Navigate between cell elements
`Arrow Up`	Navigate between cell elements
`Home`	Navigate to the first cell of the current row
`End`	Navigate to the last cell of the current row
`Ctrl+Home`	Navigate to the first cell of the first row
`Ctrl+End`	Navigate to the last cell of the last row
`Space`	Navigate to the next scrollable page
`Page Up`	Navigate to the previous scrollable page
`Page Down`	Navigate to the next scrollable page
`Space`	Toggle row children expansion when grouping cell is focused

Selection

Keys	Description
`Shift+Space`	Select the current row
`Shift+Arrow Up/Down`	Select the current row and the row above or below
`Shift`+ Click on cell	Select the range of rows between the first and the last clicked rows
`Ctrl+A`	Select all rows
`Ctrl+C`	Copy the currently selected row(s)
`ALT+C`	Copy the currently selected row(s) including headers
`Ctrl`+ Click on cell	Enable multi-selection
`Ctrl`+ Click on a selected row	Deselect the row

Sorting

Keys	Description
`Ctrl`+ Click on header	Enable multi-sorting
`Shift`+ Click on header	Enable multi-sorting
`Shift+Enter`	Enable multi-sorting when column header is focused
`Enter`	Sort column when column header is focused
`Ctrl+Enter`	Open column menu when column header is focused

Group & pivot

Keys	Description
`Ctrl+Enter`	Toggles the detail panel of a row

Key assignment conventions

The above key assignments are for Windows and Linux. On macOS:

replace Ctrl with ⌘ Command
replace ALT with ⌥ Option