Skip to content
Edit this page
+

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:
  • Europe: EAA (European Accessibility Act)

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

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

Accessibility changes in v7

The Data Grid v7 will improve the accessibility and will be more aligned with the WAI-ARIA authoring practices.

You can start using the new accessibility features by enabling ariaV7 experimental feature flag:

<DataGrid experimentalFeatures={{ ariaV7: true }} />

Density

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

Density selector

To enable the density selector, create a toolbar containing 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 selector from the toolbar, as the following demo illustrates:

Press Enter to start editing

To hide the density selector, add the disableDensitySelector prop to the Data Grid.

Density prop

Set the vertical density of the Data Grid using the density prop. This 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 default density set to compact:

Press Enter to start editing

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, 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:

Without focus management

Correct focus management

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) => (
  <Box>
    <Link tabIndex={params.tabIndex} href="/#">
      more info
    </Link>
  </Box>
);

The following key assignments apply to Windows and Linux users.

On macOS:

  • replace Ctrl with ⌘ Command
  • replace Alt with ⌥ Option
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 rows
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 and pivot

Keys Description
Ctrl+Enter Toggle the detail panel of a row

API