diff --git a/aria-practices.html b/aria-practices.html index bcd417fdc2..c6d173c1a3 100644 --- a/aria-practices.html +++ b/aria-practices.html @@ -1227,7 +1227,7 @@

WAI-ARIA Roles, States, and Properties

Grids : Interactive Tabular Data and Layout Containers

- +

A grid widget is a container that enables users to navigate the information or interactive elements it contains using directional navigation keys, such as arrow keys, Home , and End. As a generic container widget that offers flexible keyboard navigation, it can serve a wide variety of needs. @@ -2288,7 +2288,7 @@

Table

If the number of widgets is large, replacing the table with a grid can dramatically reduce the length of the page tab sequence because a grid is a composite widget that can contain other widgets.

- As with other WAI-ARIA roles that have a native host language equivalent, + As with other WAI-ARIA roles that have a native host language equivalent, authors are strongly encouraged to use a native HTML table element whenever possible. This is especially important with role table because it is a new feature of WAI-ARIA 1.1. It is thus advisable to test implementations thoroughly with each browser and assistive technology combination that could be used by the target audience. @@ -2507,7 +2507,7 @@

WAI-ARIA Roles, States, and Properties

Tooltip Widget

NOTE: This design pattern is work in progress; it does not yet have task force consensus. - Progress and discussions are captured in + Progress and discussions are captured in issue 128.

@@ -2735,6 +2735,244 @@

WAI-ARIA Roles, States, and Properties

+
+

Treegrid

+

+ A treegrid widget presents a hierarchical data grid consisting of tabular information that is editable or interactive. + Any row in the hierarchy may have child rows, and rows with children may be expanded or collapsed to show or hide the children. + For example, a hierarchical e-mail discussion list uses a treegrid to display messages and responses to that message, a message row with responses can be expanded to reveal the response messages. +

+

+ In a treegrid both rows and cells are focusable. Every row and cell contains a focusable element or is itself focusable, regardless of whether individual cell content is editable or interactive. + There is one exception: if column cells do not provide functions, such as sort or filter, they do not need to be focusable. + One reason it is important for all cells to be able to receive or contain keyboard focus is that screen readers will typically be in their application reading mode, rather than their document reading mode, when users are interacting with the grid. + While in application mode, a screen reader user hears only focusable elements and content that labels focusable elements. + So, screen reader users may unknowingly overlook elements contained in a treegrid that are either not focusable or not used to label a column or row. +

+

+ When using a keyboard to navigate a treegrid, a visual keyboard indicator informs the user which row or cell is focused. + If the treegrid allows the user to choose just one item for an action, then it is known as a single-select treegrid, and the item with focus also has a selected state. + However, in multi-select treegrids, which enable the user to select more than one row or cell for an action, the selected state is independent of the focus. + For example, in a hierarchical e-mail discussion grid, the user can move focus to select any number of rows for an action, such as delete or move. + It is important that the visual design distinguish between items that are selected and the item that has focus. + For more details, see this description of differences between focus and selection. +

+ +
+

Examples

+ + +
+

Keyboard Interaction For Data Grids

+

+ The following keys provide treegrid navigation by moving focus among rows and cells of the grid. + Implementations of treegrid make these key commands available when an element in the grid has received focus, e.g., after a user has moved focus to the grid with Tab. Moving focus into the grid may result in the first cell or the first row being focused. Whether focus goes to a cell or the row depends on author preferences and whether row focus is supported, since some treegrids may not provide focus to rows. +

+
    +
  • + Enter: If cell only focus is enabled and focus is on the first cell with the aria-expanded property it will will open or close the child rows, otherwise performs the default action for the cell.
    • +
  • + Tab: If there are focusable elements in the current row (e.g. inputs, buttons, links, ..) focus moves to the next input in the row. If on the last input in the row, focus moves out of the treegrid widget to the next focusable control on the page.
    • +
  • + Right Arrow: +
      +
    • If focus is on a row and the row is expandable, but not expanded, the row is expanded.
      • +
    • If focus is on a row and the row is not expandable or is expanded, focus moves to the first cell in the row.
      • +
    • If focus is on the right-most cell in the row, focus does not move.
      • +
    • If focus is on any other cell, focus one cell to the right.
      • +
    +
    • +
  • Left Arrow: +
      +
    • If focus is on a row and the row is expanded, the row is collapsed.
      • +
    • If focus is on a row and the row is not expandable or is collapsed, focus does not move.
      • +
    • If focus is on a first cell in the row and row focus is supported, focus moves to the row.
      • +
    • If focus is on a first cell in the row and row focus is not supported,focus does not move.
      • +
    • If focus is on a any other cell, focus one cell to the left.
      • +
    +
    • +
  • + Down Arrow: +
      +
    • If focus is on a row, moves focus one row down. If focus is on the last row, focus does not move.
      • +
    • If focus is on a cell, moves focus one cell down. If focus is on the bottom cell in the column, focus does not move.
      • +
    +
  • + Up Arrow: +
      +
    • If focus is on a row, moves focus one row up. If focus is on the first row, focus does not move.
      • +
    • If focus is on a cell, moves focus one cell up. If focus is on the top cell in the column, focus does not move.
      • +
    +
  • + Page Down: +
      +
    • If focus is on a row, moves focus down an author-determined number of rows, typically scrolling so the bottom row in the currently visible set of rows becomes one of the first visible rows. If focus is in the last row of the grid, focus does not move.
      • +
    • If focus is on a cell, moves focus down an author-determined number of cells, typically scrolling so the bottom row in the currently visible set of rows becomes one of the first visible rows. If focus is in the last row of the grid, focus does not move.
      • +
    +
    • +
  • + Page Up: +
      +
    • If focus is on a row, moves focus up an author-determined number of rows, typically scrolling so the top row in the currently visible set of rows becomes one of the last visible rows. If focus is in the first row of the grid, focus does not move.
      • +
    • If focus is on a cell, moves focus up an author-determined number of cells, typically scrolling so the top row in the currently visible set of rows becomes one of the last visible rows. If focus is in the first row of the grid, focus does not move.
      • +
    +
    • +
  • + Home: +
      +
    • If focus is on a row, moves focus up to the first row. If focus is in the first row of the grid, focus does not move.
      • +
    • If focus is on a cell, moves focus to the first cell in the row. If focus is in the first cell of the row, focus does not move.
      • +
    +
    • +
  • + End: +
      +
    • If focus is on a row, moves focus to the last row. If focus is in the last row of the grid, focus does not move.
      • +
    • If focus is on a cell, moves focus to the last cell in the row. If focus is in the last cell of the row, focus does not move.
      • +
    +
    • +
  • + Control + Home: +
      +
    • If focus is on a row, moves focus up to the first row. If focus is in the first row of the grid, focus does not move.
      • +
    • If focus is on a cell, moves focus to the first cell in the column. If focus is in the first row of the grid, focus does not move.
      • +
    +
    • +
  • + Control + End: +
      +
    • If focus is on a row, moves focus to the last row. If focus is in the last row of the grid, focus does not move.
      • +
    • If focus is on a cell, moves focus to the last cell in the column. If focus is in the last row of the grid, focus does not move.
      • +
    +
    • +
+
    +
  • + When the above treegrid navigation keys move focus, whether the focus is set on an element inside the cell or the grid cell depends on cell content. + See Whether to Focus on a Cell or an Element Inside It. +
    • +
  • + While navigation keys, such as arrow keys, are moving focus from cell to cell, they are not available to do something like operate a combobox or move an editing caret inside of a cell. + If this functionality is needed, see Editing and Navigating Inside a Cell. +
    • +
  • If navigation functions can dynamically add more rows or columns to the DOM, key events that move focus to the beginning or end of the grid, such as control + End, may move focus to the last row in the DOM rather than the last available row in the back-end data.
    • +
+

If a grid supports selection of cells, rows, or columns, the following keys are commonly used for these functions.

+
    +
  • + Control + Space: +
      +
    • If focus on a row, selects all cells.
      • +
    • If focus is on a call, selects the column that contains the focus.
      • +
    +
    • +
  • + Shift + Space: +
      +
    • If focus on a row, no change in selection.
      • +
    • If focus on a cell, selects the row that contains the focus. If the grid includes a column with checkboxes for selecting rows, this key can serve as a shortcut for checking the box when focus is not on the checkbox.
      • +
    +
    • +
  • Control + A: Selects all cells.
    • +
  • + Shift + Right Arrow: +
      +
    • If focus on a row, no change in selection.
      • +
    • if focus on a cell, extends selection one cell to the right.
      • +
    +
    • +
  • + Shift + Left Arrow: +
      +
    • If focus on a row, no change in selection.
      • +
    • if focus on a cell, extends selection one cell to the left.
      • +
    +
    • +
  • + Shift + Down Arrow: +
      +
    • If focus on a row, extends selection to all the cells in the next row.
      • +
    • If focus on a cell, extends selection one cell down.
      • +
    +
    • +
  • + Shift + Up Arrow: +
      +
    • If focus on a row, extends selection to all the cells in the previous row.
      • +
    • If focus on a cell, extends selection one cell up.
      • +
    +
    • +
+

See for cut, copy, and paste key assignments.

+
+
+ +
+

WAI-ARIA Roles, States, and Properties

+ + + +
+ +
+

Window Splitter