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 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.

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

In this implementation:

  • 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.
  • header cells are not focusable since they do not provide any functionality and because they can be announced by screen readers as labels.

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

In this implementation:

  • The navigation keys and functions are the same as example 1 except that the column headers are now focusable.
  • The date and description columns may be sorted by activating the column header.
  • A category may be changed by using the category pop-up menu.
  • An amount may be edited by activating the cell.

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

In this implementation:

  • In addition to the navigation keys supported in examples 1 and 2, Page Down and Page Up can 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.
  • Choosing the "Hide" option from one of the column header menus hides a column.
  • The aria-colindex value on a focused column informs screen readers of the number of that column within the total set of columns. Thus, when one or more columns are hidden, screen reader users can be aware of the hidden columns because one or more column numbers are skipped as they navigate across a row.

Accessibility Features

Please replace this content with a list of accessibility features demonstrated in this implementation, such as the following. If the content will vary significantly for the above implementations, make this a level 4 section inside each of the above level 3 implementation sections.

Keyboard Support

Key Function
key 1 Key 1 action
key 2 Key 2 action
key 3 Key 3 action

ARIA Roles, Properties, and States

Role Property/State Element Usage
role element X
  • Identify element with the role behavior
aria-xxxxx X[role="yyy"] element
  • Purpose of aria properties or aria states within example

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