Layout Grid Examples

Note: This page is not ready for review; it is work in progress. When ready for review, feedback will be welcome in issue 105.

Following are three example implementations of the design pattern for grid that demonstrate how a grid can be used to group a collection of interactive widgets into a single stop in the page tab sequence. In these examples, each widget, such as a link or button, is in a separate cell of the grid, and the user can navigate among 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 provide the groups of widgets they contain with a logical structure that can be easily understood by screen reader users. Because screen readers present grids using their broadly familiar table constructs, screen reader users can perceive the logical relationships conveyed by the visual arrangement of the widgets in these examples.

However, one of the most important reasons for using a grid widget as a grouping container for other widgets is that grid cells are structures that do not override or suppress the semantics of the elements they contain. That is, a link contained inside of a grid cell is presented to a screen reader as a link whereas a link inside of a menu must be a menuitem and a link inside of a listbox must be an option. These examples are designed to demonstrate some of the wide variety of circumstances, ranging from very simple to moderately complex, where it is advantageous to leverage this important feature of grids.