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,
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.
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
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 pop-up menu.
Example 3: Scrollable Data Grid With Column Hiding
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.
Moves focus one cell to the right.
If focus is on the right-most cell in the row, focus does not move.
Moves focus one cell to the left.
If focus is on the left-most cell in the row, focus does not move.
Moves focus one cell down.
If focus is on the bottom cell in the column, focus does not move.
Moves focus one cell Up.
If focus is on the top cell in the column, focus does not move.
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.
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.
moves focus to the first cell in the row that contains focus.
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
Identifies the element that serves as the grid widget container.
Because focus is managed using
, 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.
Refers to the heading element that labels the grid.
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.
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.
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.
In example 2, applied when a column is sorted in ascending order.
In example 2, applied when a column is sorted in descending order.
In example 2, applied when a column is sortable but not sorted.
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.