Data Grid Examples

Read This First

The code in this example is not intended for production environments. Before using it for any purpose, read this to understand why.

This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.

There may be support gaps in some browser and assistive technology combinations, especially for mobile/touch devices. Testing code based on this example with assistive technologies is essential before considering use in production systems.
The ARIA and Assistive Technologies Project is developing measurements of assistive technology support for APG examples.
Robust accessibility can be further optimized by choosing implementation patterns that maximize use of semantic HTML and heeding the warning that No ARIA is better than Bad ARIA.

About This Example

Following are three example implementations of the Grid Pattern that demonstrate the keyboard interactions and ARIA features that enable accessible, interactive presentation of tabular information. Each of the following three grids presents a set of financial transactions. The first is a simple grid with minimum ARIA markup and keyboard support. The second and third implementations add advanced features, such as content editing, sort, scroll, and show/hide.

Similar examples include:

Layout Grid Examples: Three example implementations of grids that are used to lay out widgets, including a collection of navigation links, a message recipients list, and a set of search results.
Advanced Data Grid Example: Example of a grid with behaviors and features similar to a typical spreadsheet, including cell and row selection.

Examples

Example 1: Minimal Data Grid

Transactions January 1 through January 6

Date	Type	Description	Amount	Balance
01-Jan-16	Deposit	Cash Deposit	$1,000,000.00	$1,000,000.00
02-Jan-16	Debit	Down Town Grocery	$250.00	$999,750.00
03-Jan-16	Debit	Hot Coffee	$9.00	$999,741.00
04-Jan-16	Debit	The Filling Station	$88.00	$999,653.00
05-Jan-16	Debit	Tinker's Hardware	$3,421.00	$996,232.00
06-Jan-16	Debit	Cutey's Salon	$700.00	$995,532.00

Notes

Data cells can be focused using standard navigation keys, including directional arrows, Home, End, Control + Home, and Control + End.
The Page Down and Page Up keys are not supported since such scroll-like functions are not useful with so few rows.
The links can be activated with the keyboard when focused.
Since the header cells do not provide any functionality, they are not focusable. Screen reader users are still aware of their presence because row and column headers are announced by screen readers during navigation. And, they are also navigable when using a screen reader's reading or browsing mode.

Example 2: Sortable Data Grid With Editable Cells

Transactions January 1 through January 7

Date	Type	Description	Category	Amount	Balance
01-Jan-16	Deposit	Cash Deposit	Income Groceries Dining Out Auto Household Beauty	$1,000,000.00	$1,000,000.00
02-Jan-16	Debit	Down Town Grocery	Income Groceries Dining Out Auto Household Beauty	$250.00	$999,750.00
03-Jan-16	Debit	Hot Coffee	Income Groceries Dining Out Auto Household Beauty	$9.00	$999,741.00
04-Jan-16	Debit	The Filling Station	Income Groceries Dining Out Auto Household Beauty	$88.00	$999,653.00
05-Jan-16	Debit	Tinker's Hardware	Income Groceries Dining Out Auto Household Beauty	$3,421.00	$996,232.00
06-Jan-16	Debit	Cutey's Salon	Income Groceries Dining Out Auto Household Beauty	$700.00	$995,532.00
07-Jan-16	Debit	My Chocolate Shop	Income Groceries Dining Out Auto Household Beauty	$41.00	$995,491.00

Notes

The navigation keys and functions are the same as example 1 except that the column headers are focusable because the date and amount columns provide sort functionality.
A description may be edited by activating the cell.
A category may be changed by using the category popup menu.

Example 3: Scrollable Data Grid With Column Hiding

Transactions for January 1 through January 15

Date	Type	Description	Category	Amount	Balance
01-Jan-16	Deposit	Cash Deposit	Income	$1,000,000.00	$1,000,000.00
02-Jan-16	Debit	Down Town Grocery	Groceries	$250.00	$999,750.00
03-Jan-16	Debit	Hot Coffee	Dining Out	$9.00	$999,741.00
04-Jan-16	Debit	The Filling Station	Auto	$88.00	$999,653.00
05-Jan-16	Debit	Tinker's Hardware	Household	$3,421.00	$996,232.00
06-Jan-16	Debit	Cutey's Salon	Beauty	$700.00	$995,532.00
07-Jan-16	Debit	My Chocolate Shop	Dining Out	$41.00	$995,491.00
08-Jan-16	Debit	Who's Cook'n	Dining Out	$150.00	$995,341.00
09-Jan-16	Debit	Dmuddy Paws	Pet	$100.00	$995,241.00
10-Jan-16	Debit	West End Bikes	Recreation	$6,420.00	$988,821.00
11-Jan-16	Debit	Pay More Cars	Auto	$431,323.00	$557,498.00
12-Jan-16	Debit	The Interior Shop	Household	$142,334.00	$415,164.00
13-Jan-16	Debit	Adventure Guys	Recreation	$88,424.00	$326,740.00
14-Jan-16	Debit	Hungry Folks Place	Dining Out	$313.00	$326,427.00
15-Jan-16	Debit	Horse Play	Recreation	$2,421.00	$324,006.00

Notes

In addition to the navigation keys supported in examples 1 and 2, Page Down and Page Up scroll the grid.
As navigating up or down scrolls the visible set of rows, the aria-rowindex value of the row containing the focus informs the screen reader of the number of that row within the total set of rows.
Activating the "Hide Type and Category" button hides the type and category columns.
The aria-colindex value on a cell informs screen readers of the position of that cell within the row. When one or more columns are hidden, screen reader users can be aware of the hidden columns because those column numbers are not present as users navigate across a row.

Keyboard Support

key	Function
`Right Arrow`	Moves focus one cell to the right. If focus is on the right-most cell in the row, focus does not move.
`Left Arrow`	Moves focus one cell to the left. If focus is on the left-most cell in the row, focus does not move.
`Down Arrow`	Moves focus one cell down. If focus is on the bottom cell in the column, focus does not move.
`Up Arrow`	Moves focus one cell Up. If focus is on the top cell in the column, focus does not move.
`Page Down`	In example 3, moves focus down five rows, scrolling so the bottom row in the currently visible set of rows becomes the first visible row. If focus is in the last row, focus does not move.
`Page Up`	In example 3, moves focus up 5 rows, scrolling so the top row in the currently visible set of rows becomes the last visible row. If focus is in the first row of the grid, focus does not move.
`Home`	moves focus to the first cell in the row that contains focus.
`End`	moves focus to the last cell in the row that contains focus.
`Control + Home`	moves focus to the first cell in the first row.
`Control + End`	moves focus to the last cell in the last row.

Role, Property, State, and Tabindex Attributes

Role	Attribute	Element	Usage
`grid`		`table`	Identifies the element that serves as the grid widget container. The grid element is not focusable because it implements the practice described in the section on Managing Focus Within Components Using a Roving tabindex. Since the `grid` role is applied to a `table` element, the `row` , `rowheader`, `colheader`, and `gridcell` roles do not need to be specified because they are implied by `tr`, `th`, and `td` tags.
	`aria-labelledby="ID_REF"`	`table`	Refers to the heading element that labels the grid.
	`aria-rowcount="16"`	`table`	In example 3, specified because a total of 16 rows are available, but fewer than 16 rows are visible. In this case, to demonstrate this feature, some rows are hidden using `display:none`, which excludes them from the browser's accessibility tree. a more common scenario for using `aria-rowcount` is when not all data is loaded into the DOM at one time.
	`aria-colcount="6"`	`table`	In example 3, specified because a total of 6 columns are available, but when columns are hidden, fewer than 6 columns are visible. Similar to how `aria-rowcount` overrides the browser calculation of the total number of rows, the browser uses this value for the total number of columns so it can report the correct number when columns are hidden.
	`aria-rowindex="INDEX_VALUE"`	`tr`	Used in example 3 because not all rows are present in the accessibility tree. Overrides the browser calculation of the row number. Has a value from 1 to 16. Note that it is 1-based, not 0-based.
	`aria-sort="ascending"`	`th`	In example 2, applied when a column is sorted in ascending order.
	`aria-sort="descending"`	`th`	In example 2, applied when a column is sorted in descending order.
	`aria-sort="none"`	`th`	In example 2, applied when a column is sortable but not sorted.
	`aria-colindex="INDEX_VALUE"`	`th` and `td`	Used in example 3 because when the column hiding feature is used, not all columns are present in the accessibility tree. Overrides the browser calculation of the column number. Has a value from 1 to 6. Note that it is 1-based, not 0-based.

JavaScript and CSS Source Code

CSS:
- dataGrids.css
- menuButton.css
JavaScript:

HTML Source Code

Example 1: Minimal Data Grid

To copy the following HTML code, please open it in CodePen.

Example 2: Sortable Data Grid With Editable Cells

To copy the following HTML code, please open it in CodePen.

Example 3: Scrollable Data Grid With Column Hiding

To copy the following HTML code, please open it in CodePen.