Layout Grid Examples

The following examples demonstrate how the grid design 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:

Examples

Example 1: Simple List of Links

This example presents a list of links titled "Related Documents" in a grid.

Related Documents

Notes

  1. This grid includes three features to enhance perception of the availability of arrow key navigation:
    1. The focus indicator changes to a dotted blue box.
    2. When screen size is sufficiently large, A graphic of an arrow keypad appears in the page gutter on the bottom left.
    3. The first time a user moves focus into the grid with Tab, a NUX (new user experience helper) appears in the page tab sequence immediately following the grid. The NUX explains the meaning of the focus indicator and keypad graphic, and it remains visible until the user closes it.
  2. This grid is useful in a responsive design. It dynamically adjusts the number of cells per row based on screen size. As the grid structure changes, the arrow key behavior adjusts accordingly.
  3. Since all of the links are part of a single logical group, repeatedly pressing either Down Arrow or Right Arrow will move focus through all links in different sequences that depend on the visual arrangement.
  4. The Left Arrow and Up Arrow keys reverse Right Arrow and Down Arrow focus movement, respectively.
  5. The Home and End keys will move focus to the first and last links, respectively.
  6. The Page Down and Page Up keys are not supported since scrolling or row skipping functions are not needed with so few rows.
  7. The links can be activated with the keyboard when focused.

Example 2: Pill List For a List of Message Recipients

Add recipients by typing a string in the "New Recipient Name" field and pressing Enter or activating the "Add" button. See how this grid behaves as the number of elements increases.

Send To:
Last change to recipient list:

Notes

  1. This grid demonstrates that logical rows do not have to be vertically stacked.
    1. Each logical row has two cells: one containing a recipient name link and one containing the remove icon for that recipient.
    2. There are multiple logical rows arranged in a line across the screen.
    3. As the number of recipients grows, new elements wrap to additional lines as needed.
    4. Down Arrow and Up Arrow move to the next and previous logical row.
    5. So for example, Down Arrow can move focus from recipient to recipient or from remove icon to remove icon.
  2. Like in example 1, Right Arrow can move focus to every element from beginning to end and vice versa with the Left Arrow.
  3. Pressing Enter when focus is in the add recipient input will activate the "Add" button.
  4. When recipients are added or removed, an off-screen live region informs screen reader users of the result of the action so they do not have to move focus to confirm that the action was completed.

Example 3: Scrollable Search Results

This example demonstrates how a grid can make moving through an infinitely large data set as easy and efficient for keyboard users as it is for mouse users. It presents a hypothetical set of search results for W3C resources about WAI-ARIA.

Search Results for "W3C WAI-ARIA"

Showing results 1 to 5 of 19
World Wide Web Consortium WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities.
World Wide Web Consortium In this document, states and properties are both treated as aria-prefixed markup attributes. However, they are maintained conceptually distinct to clarify subtle ...
World Wide Web Consortium Mar 20, 2014 - This is the WAI-ARIA 1.0 W3C Recommendation from the Protocols & Formats Working Group of the Web Accessibility Initiative. The Working ...
World Wide Web Consortium The mission of the Accessible Rich Internet Applications Working Group (ARIA WG) is to develop technologies that enhance accessibility of web content for ...
World Wide Web Consortium Jul 21, 2016 - This version of ARIA 1.1 changes the aria-kbdshortcuts property to aria-keyshortcuts , expands roles that can be used in combo boxes, adds a ...
World Wide Web Consortium This section defines the WAI-ARIA role taxonomy and describes the characteristics and properties of all roles. A formal RDF / OWL representation of all the ...
World Wide Web Consortium Mar 17, 2016 - The WAI-ARIA Authoring Practices Guide is intended to provide an understanding of how to use WAI-ARIA to create an accessible Rich Internet ...
World Wide Web Consortium Oct 5, 2016 - ARIA in HTML is a [ HTML51 ] specification module. Any HTML features, conformance requirements, or terms that this specification module ...
World Wide Web Consortium Jul 24, 2015 - Setting an ARIA role and/or aria-* attribute that matches the default implicit ARIA semantics is unnecessary and is NOT RECOMMENDED as ...
World Wide Web Consortium Here are answers to some frequently asked questions (FAQ) about WAI-ARIA, the Accessible Rich Internet Applications Suite. When we add significant ...
World Wide Web Consortium WAI-ARIA enables rich Internet applications to have the same accessibility features as desktop GUI applications by adding metadata to markup technologies ...
World Wide Web Consortium Alertdialog #. aria.alertdialog = role="" alertdialog "" intermixed with an optional aria-expanded element. Application #. aria.application = role="" application ...
World Wide Web Consortium Abstract. This document provided readers with an understanding of how to use WAI-ARIA [ ARIA ] to create accessible rich internet applications. It described ...
World Wide Web Consortium May 21, 2015 - This document demonstrates how to use WAI-ARIA in [ HTML51 ], which especially helps with dynamic content and advanced user interface ...
World Wide Web Consortium Accessible Rich Internet Applications (WAI-ARIA) 1.0. Accessibility of Web content to people with disabilities requires semantic information about widgets, ...
World Wide Web Consortium Feb 3, 2014 - This version: http://www.w3.org/WAI/PF/aria/; Previous editors' draft: ... This document is part of the WAI-ARIA suite described in the WAI-ARIA ...
World Wide Web Consortium WAI-ARIA is a technical specification that provides a framework to improve the accessibility and interoperability of web content and applications. This document ...
World Wide Web Consortium WAI-ARIA divides the semantics into roles (the type defining a user interface element) and states and properties supported by the roles. Authors need to ...
World Wide Web Consortium Jan 3, 2014 - NVDA 2 supports all landmarks except it will not support navigation to “application”; Window Eyes as of V.7 does not support ARIA landmarks.

Notes

  1. This example shows how a logical row can span multiple physical rows. All three cells for each result are in a row, and that row occupies multiple visual rows on the screen.
  2. In addition to the navigation keys supported in examples 1 and 2, Page Down and Page Up scroll the grid.
  3. As navigating up or down scrolls the visible set of rows, the aria-rowindex value of the row containing focus informs assistive technologies of the number of that row within the total set of rows.

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.

Key Function
Right Arrow
  • Moves focus one cell to the right.
  • When focus is on the right-most cell in the row, focus moves to the first cell in the following row.
  • If focus is on the last cell in the grid, focus does not move.
Left Arrow
  • Moves focus one cell to the left.
  • When focus is on the left-most cell in the row, focus moves to the last cell in the previous row.
  • If focus is on the first cell in the grid, focus does not move.
Down Arrow
  • Moves focus to the next logical row.
  • In examples 2 and 3, if focus is in the last logical row, focus does not move.
  • In example 1, since there is only one logical row and since all elements are logically equivalent, focus moves to the next cell but does not move if it is in the last cell of the grid.
Up Arrow
  • Moves focus to the previous logical row.
  • In examples 2 and 3, if focus is in the first logical row, focus does not move.
  • In example 1, since there is only one logical row and since all elements are logically equivalent, focus moves to the previous cell but does not move if it is in the first cell of the grid.
Page Down (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.
Page Up (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, focus does not move.
Home Moves focus to the first cell in the row that contains focus.
End 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

Role Attribute Element Usage
grid div Identifies the element containing the grid widget. Because focus is managed using roving tabindex, the grid element is not focusable.
aria-labelledby="ID_REF" div Refers to the element that labels the grid.
aria-rowcount="19" div
  • Specified in example 3 because the total number of rows available is 19, but fewer than 19 rows are visible to assistive technologies.
  • To demonstrate this feature, some rows are hidden using display:none, which excludes them from the browser's accessibility tree.
  • More commonly, aria-rowcount is used when not all data is loaded into the DOM at one time.
row div
  • Identifies the element containing all the cells for a row.
  • In these examples, the rows are not physical; they are logical groups of cells:
    • In example 2, each recipient and its remove icon make a logical row, but on a physical row, there may be multiple recipients.
    • In example 3, each search result is a logical row, but that logical row occupies multiple physical rows on the screen.
aria-rowindex="INDEX_VALUE" div
  • Used in example 3 because not all rows are present in the accessibility tree.
  • Overrides browser calculation of row number provided to assistive technologies.
  • Has a value from 1 to 19 that is dynamically inserted by the JavaScript.
  • Note: it is 1-based, not 0-based.
gridcell span, div Identifies the element containing the content for a single cell.
tabindex="-1" span, div
  • Makes the cell focusable and excludes it from the page Tab sequence.
  • Applied to all cells that do not contain an interactive widget that consumes arrow keys, such as a link or button.
  • Changed dynamically to 0 by the JavaScript when the cell is to be included in the page Tab sequence.
  • At any given time, only one of the cells or widgets within the grid is in the page Tab sequence.
  • This approach to managing focus is described in the section on roving tabindex.
tabindex="-1" Widgets inside cells
  • Makes the widget, e.g., link or button, focusable and excludes it from the page Tab sequence.
  • Clicks and keyboard commands that move focus inside the grid can focus widgets if the containing cell is not focusable.
  • Changed dynamically to 0 by the JavaScript when the widget is to be included in the page Tab sequence.
  • At any given time, only one of the cells or widgets within the grid is in the page Tab sequence.
  • This approach to managing focus is described in the section on roving tabindex.
tabindex="0" span, div, or if present, widget inside cell
  • Makes the element focusable and includes it in the page Tab sequence.
  • Set dynamically by the JavaScript when the element is to be included in the page Tab sequence.
  • At any given time, only one element within the grid is in the page Tab sequence.
  • This approach to managing focus is described in the section on roving tabindex.

Javascript and CSS Source Code

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