Complex Grid Examples

From CodeTalks

1 Introduction
2 Grid Cell Types
3 Special Grid Cell Types
4 References

Introduction

This wiki page tries to summarize and to categorize the various grid types along with examples. Starting 'from the interior' (basic grid) a simple taxonomy is given to cover the different variants. The term "Table" for Grids is intentionally avoided since this will cause potential confusion when content of this overview is applied to the HTML 4.01 TABLE element.

Keyboard Navigation is proposed according to DHTML Style Guide Keyboard Navigation Recommendations for Grids. If already defined, recommendations for expected speech output of Assistive Technology are given.

The basic principles of grid types and variants remain technology-independent but it should be stated here that the HTML5 terminology about the difference between table and datagrid elements may lead to some confusion. According to HTML5, the table element is for display-only, read-only content (that never can be edited) whereas the datagrid element does contain always (potentially) editable content and maps to ARIA role=grid. Datagrids may may also contain hierarchical rows. This can be reflected by ARIA role=treegrid for grids with this content.

Note: It should be clarified in near future if role=treegrid will be necessary to indicate to Assistive Technology a different navigation scheme or if the usage of aria-expanded=true/false for the respective row and/or grid cell would be sufficient.

The examples on this page are image-based with links to existing example URL's. Later versions of this page will contain also links to accessible grid type examples in the codetalks SVN. In the meantime, please use the textual description of the grid type images.

Grid Cell Types

Cells with Single Content

These simple grids contain one content element in a checker board-like layout. The Grid cells contain only one element (that is potentially editable or can act as a action trigger).

Keyboard Navigation/Interaction:

Tab
- The initial tab enters the grid with focus on the first header cell.
- Once in the grid a second tab moves out of the grid to the next tab stop.
- Once focus is established in the grid, a TAB into or a Shift Tab into the grid will return to the cell which last had focus.
Left and Right Arrow
- Navigation between columns
- If the next cell in the row is not present, focus should not move.
Up and Down Arrow
- Navigation between Rows.
- If the next cell in the column is empty, focus should move to the first column in the next row.
- If the next cell in the column is not empty, focus should move directly to that cell.
Enter
- If the cell contains an editable field, the Enter key is used to enter edit mode and the esc key used to exit edit mode.

Assistive Technology:

(see Test Case Page, Grids)

Cells with Multiple Content

These Grid cells may contain a number / a combination of elements (e.g. a combination of Links, Lists, Images etc.) instead of only one element.

Keyboard Navigation/Interaction:

(to be added)

Assistive Technology:

(to be added)

Example 1: Grid with multiple Cell Content 1

Example 2: Grid with multiple Cell Content 2

Example 3: Grid with multiple Cell Content 3

Grids in Grid Cells

When entire grids are put inside a single grid cell or an entire grid section we have a nested grid (grid inside a grid) scenario. It needs to be discussed if this combination forms a true hierarchy on grid cell level or if the inner grid can be seen as a separate entity (as it currently is in contemporary Assistive Technology).

Keyboard Navigation/Interaction

(to be added)

Assistive Technology:

(to be added)

Example Screen 1: A Grid in a Grid region

Collapsed Cells

These grids consist of visually paired (collapsed) cells forming a single cell (rowspans/colspans).

a) Row Span

b) Column Span

Keyboard Navigation/Interaction

(all of Elementary Grids)

Assistive Technology:

(all of Elementary Grids)

Example 1: Grid with Column Spanning

Example 2: Grid with Row and Column Spanning

Example 3: Grid with a horizontal Radiobuttongroup

Edge Case:Grid with Common Cell Sections

There is a possible variation where no rowspan (or colspan, respectively) is performed; instead, content of the individual cells is repeated non-visible to cell properties. See Example below (Cars). Reason: X/Y Navigation)

Keyboard Navigation/Interaction

(all of Elementary Grids)
In addition, the sub rows remain selectable and the sub row cells remain focusable.

Assistive Technology:

Each separate cell in a section should contain the same information for Screen Reader Texts (must be non-visual in special cell attributes).

Example Screen 2: Grid with Common Cell Sections

Hierarchical Grid Cells

Grids with Vertical Hierarchies

This Grid type contains rows that are expandable like tree nodes in a Tree element (vertical (Y-Axis) expansion). The expansion takes place usually in the first column of the grid.

Hierarchical tree levels are visualized by a tree indicator control, e.g. by a black triangle. If a sub-node contains items, that sub-node also has a tree indicator control. When the last hierarchical level (leaf node) is reached, a different indicator element, e.g. a square icon, may be displayed in addition.

Examples include a threaded view of an email grid; a calendar that opens month, week and day views; or a File Browser that shows directories, subdirectories and files.

A special case may be a Grid that has only one additional level of hierarchy:

Keyboard Navigation/Interaction:

(to be added)

Assistive Technology:

(to be added)

Example Screen 1: Hierarchical Month View of a Calendar

Example Screen 2: Tree Grid with 4 levels

Edge Case: Grids with Regions to be Toggled

These Grids consists of expandable, all column-spanning rows forming intermediate expandable 'top-level' rows for the sections below. These top level rows have either one big row or multiple rows below as their contents shown as result of the expansion of row above.

a) Variant one: one big row

The content of the region can become very complex, even a grid on its own.

b) Variant two: multiple rows

A Grid may hold a special 'expansion' column to toggle the visibility of one row below.

Example 3:

a) Closed state

b) Open state

Alternatively, a cell content itself may toggle the visibility of the region also.

Example 4:

a) Closed state

b) Opened state

Example 5a: All Rows are collapsed

Example 5b: One Row is expanded

Example 5c: Outlook Inbox List View

A special case is the presence of summary rows in a Grid:

Example 6a: Grid with collapsed summary cell

Example 6b: Grid with expanded summary cell

Grids with Vertical and Horizontal Hierarchies

This variant allows for additional expandable cells within a single row (vertical AND horizontal (X/Y) expansion).

Keyboard Navigation/Interaction:

(to be added)

Assistive Technology:

(to be added)

Example 1: Tree Grid with multiple hierarchies

Special Grid Cell Types

Grid Titles

Grids may have a (visible) Title or a Caption.

Keyboard Navigation/Interaction:

(all of Elementary Grids)

Assistive Technology:

(all of Elementary Grids)
Title must be announced when grid body is focused.

Grid Headers

Grids with Column or Row Headers

These Grids contain one column header per column/row.

a) Grid with Column Headers

b) Grid with Row Headers

b) Grid with Row and Column Headers

Keyboard Navigation/Interaction

(all of Elementary Grids)
Header Cells are navigable similarly

Assistive Technology:

(all of Elementary Grids)
Headers should be announced as such
X/Y Header information has to contain both Row and Column Header information

Example 1: Grid with Row and Column Headers

Grids with Special Header Functionality

Specializations/Variants may contain other header functionalities:

Selection options
- Grid rows are selectable with either Single or Multi-Selection
- There may be Master (Lead) Selections and Secondary Selections
- First Column is often Trigger for Selections (contain a selector)
Sort Options
- Headers can be sorted

Note:

Filter Options
- An optional filter row for input of filter criteria may exist

Example 1: A typical Grid with additional filter row and a selected row

Example 2: A Grid with multiple Selection (Lead and Secondary) applied

Grids with Nested/Hierarchical Headers

This Grid type contains one top-level header and one to many sub-level (nested) headers forming a grouping of headers. Also, there are variants known with sub-level horizontal headers or a combination of both.

a) Variant one: horizontal hierarchical Headers