Layout Grid Examples

About This Example

The following examples demonstrate how the Grid Pattern can be used to group a collection of interactive widgets into a single tab stop. In these examples, each widget, such as a link or button, is in a separate cell of the grid, and the user can navigate between them with the arrow keys. While navigating with the arrow keys, widgets receive keyboard focus and can be activated with Space or Enter.

In addition to streamlining keyboard interfaces, these grids also convey logical grouping and semantic relationships for the elements they contain. For people who can see the screen, these groupings and relationships are visually communicated with layout and other elements of the visual design. And, by navigating the logical structure that a grid widget provides, screen reader users are also able to easily perceive the same semantic relationships.

The distinguishing feature of grid that enables it to be used for grouping other widgets is that its cells are containers that preserve the semantics of their descendant elements. That is, grid cells do not override or suppress the semantics of the elements they contain. Thus, a link contained inside of a grid cell is presented to a screen reader as a link. By contrast, a link inside of a menu is presented as a menuitem, and a link inside of a listbox is presented as an option.

Similar examples include:

• Data Grid Examples: Three example implementations of grid that include features relevant to presenting tabular information, such as content editing, sort, and column hiding.
• Advanced Data Grid Example: Example of a grid with behaviors and features similar to a typical spreadsheet, including cell and row selection.

Examples

Other Features

This implementation of grid allows the following focus movement behaviors to be declared in the HTML.

Whether to focus a cell or an element inside it when the cell is clicked or a navigation key is pressed:

The section of the grid pattern on Setting Focus and Navigating Inside Cells describes how to design the focus placement strategy.

Whether focus can wrap from the last column to the first column in the next row or from the first column to the last column in the previous row when Right Arrow and Left Arrow are pressed:

This wrapping is expected in all grids except for those presenting tabular, i.e., spreadsheet-like, data. The data grid examples demonstrate grids where focus movement does not wrap at the ends of rows.

Whether focus can wrap to the first row in the next column or the last row in the previous column when Down Arrow and Up Arrow are pressed:

The only condition where this wrapping is appropriate is when every cell in the grid belongs to a single logical set. In other words, if presentation of all elements in a single row is logically equivalent to presenting the same elements in an arbitrary number of rows and columns, then it is appropriate for Down Arrow and Up Arrow to behave as if all cells are in a single column. For instance, in example 1, all cells contain a navigation link. That set of six links could be presented in a single row, a single column, or divided into two rows of three or three rows of two; all these presentations would be logically equivalent. Conversely, in example 3, each logical row contains three cells, and it would be bizarre for the focus to move from the last search result link to the organization cell of the first search result when Down Arrow is pressed.

The example JavaScript allows the desired focus placement and wrapping behavior to be declared in the HTML content as follows.

1. If a cell has tabindex="-1", focus is placed on the cell. Otherwise, it is placed on a focusable element inside the cell.
2. To determine whether arrow key events should wrap focus movement, the example JavaScript looks for the following custom data attributes:
   1. data-wrap-cols="true": When this custom data attribute is on the grid, Right Arrow and Left Arrow move focus from column to column even across row boundaries to the column (cell) in the next or previous row. Setting it false will disable this type of wrapping.
   2. data-wrap-rows="true": When this custom data attribute is on the grid, Down Arrow and Up Arrow move focus from row to row even across column boundaries to the row (cell) in the next or previous column. Setting it false will disable this type of wrapping.

Keyboard Support

NOTE: The following table describes keyboard commands that move focus among grid cells. In the examples on this page, some cells contain a single focusable widget, and if a cell contains a widget, the cell is not focusable; the widget receives focus instead of the cell. So, when a description says a command moves focus to a cell, the command may either focus the cell or a widget inside the cell.

Role, Property, State, and Tabindex Attributes

JavaScript and CSS Source Code

• CSS:
  • layoutGrids.css
• JavaScript:
  • layoutGrids.js
  • dataGrid.js
  • utils.js

HTML Source Code

Example 1: Simple List of Links

Example 2: Pill List For Components Like a List of Message Recipients

Example 3: Scrollable Search Results