Data Grid Examples

Following are three example implementations of the design pattern for grid 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:

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

  1. Data cells can be focused using standard navigation keys, including directional arrows, Home, End, Control + Home, and Control + End.
  2. The Page Down and Page Up keys are not supported since such scroll-like functions are not useful with so few rows.
  3. The links can be activated with the keyboard when focused.
  4. 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
$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
07-Jan-16 Debit
My Chocolate Shop
$41.00 $995,491.00

Notes

  1. 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.
  2. A description may be edited by activating the cell.
  3. A category may be changed by using the category pop-up 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

  1. In addition to the navigation keys supported in examples 1 and 2, Page Down and Page Up scroll the grid.
  2. 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.
  3. Activating the "Hide Type and Category" button hides the type and category columns.
  4. 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.
  • Because focus is managed using roving tabindex , the grid element is not focusable.
  • 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

HTML Source Code

Example 1: Minimal Data Grid

Example 2: Sortable Data Grid With Editable Cells

Example 3: Scrollable Data Grid With Column Hiding