Data Grid - Accessibility
The Data Grid has complete accessibility support. For instance, every cell is accessible using the keyboard.
The most commonly encountered conformance guidelines for accessibility are:
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.
You can change the density of the rows and the column header.
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
The user can change the density of the data grid by using the density selector from the toolbar.
To hide the density selector add the
disableDensitySelector prop to the data grid.
The vertical density of the data grid can be set using the
density prop applies the values determined by the
headerHeight props if supplied.
The user can override this setting with the toolbar density selector if provided.
The grid responds to keyboard interactions from the user and emits events when key presses happen on the grid cells.
Use the arrow keys to move the focus.
|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 next scrollable page|
|Page Down||Navigate to the previous scrollable page|
|Shift + Space||Select the current row|
|Shift + Space + Arrow Up/Down||Select the current row and the row above or below|
|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|
|Enter||Sort column when column header is focused|
|CTRL + Enter||Open column menu when column header is focused|
|CTRL + Click on header||Enable multi-sorting|
|Shift + Click on header||Enable multi-sorting|
|Shift + Enter||Enable multi-sorting when column header is focused|
The above key assignments are for Windows and Linux. On macOS, replace CTRL with ⌘ Command.