Main content

grid

Characteristics

Superclass Role:

  • composite
  • region

Subclass Roles:

  • treegrid

Base Concept:

  • HTML table

Required Owned Elements:

  • row
  • rowgroup → row

Supported States and Properties:

  • aria-level
  • aria-multiselectable
  • aria-readonly

Inherited States and Properties:

  • aria-activedescendant
  • aria-atomic
  • aria-busy (state)
  • aria-controls
  • aria-describedby
  • aria-disabled (state)
  • aria-dropeffect
  • aria-expanded (state)
  • aria-flowto
  • aria-grabbed (state)
  • aria-haspopup
  • aria-hidden (state)
  • aria-invalid (state)
  • aria-label
  • aria-labelledby
  • aria-live
  • aria-owns
  • aria-relevant

Name From:

  • author

Accessible Name Required:

  • True

An interactive control which contains cells of tabular data arranged in rows and columns, like a table.

A grid (role) is used to present the elements in the required form such as tables, charts, tree items etc. A grid (role) can also be used to form a relation between the elements. For instance, to form a relation with the cells in a table a grid (role) is used. A grid is a table with rows and columns which can be editable. Each cell is considered to be a grid cell. The grid (role) and grid cell (role) form relationship with the group role. In tables, rowgroup (role) plays the similar role as group (role) to group the rows and the row (role) will be in charge for grouping the grid cells (role).

aria-owns (property) is used to form the relation between the parent element and its child element. In the above context, grid cells will be owned by rows, Rows will be owned by rowgroups and rowgroups will be owned by grid.

Generally, screen readers will recognize the data table as a table. Now arises the question, Why should we have a grid (role) for a table? grid (role) is used for interactive tables. Content authors can help screen readers by differentiating an interactive data table and a general data table by using grid (role).

Grids do not necessarily imply presentation. The grid construct describes relationships between data such that it may be used for different presentations. Grids allow the user to move focus between cells using two dimensional navigation. For example, grid might be used as the invisible data model (hidden with CSS but still operable by assistive technologies) for a presentational chart.

Authors must ensure that elements with role gridcell are owned by elements with role row, which in turn are owned by an element with role rowgroup, grid or treegrid. If the author applies any non-global aria states or properties to a native markup element that is acting as a row (such as the tr element in HTML), the author must also apply the role of row. Authors may make cells focusable. Authors may provide row and column headers for grids, by using rowheader and columnheader roles.

Since aria can augment an element in the host language, grids can reuse existing functionality of native table grids. When aria grid or gridcell roles overlay host language table elements, they reuse the host language semantics for that table. For instance, aria does not specify general attributes for gridcell elements that span multiple rows or columns. When the author needs a gridcell to span multiple rows or columns, use the host language markup, such as the colspan and rowspan attributes in HTML.

Authors may determine the contents of a gridcell through calculation of a mathematical formula. Authors may make a cell's formula editable by the user. In a spreadsheet application, for example, the text alternative of a cell may be the calculated value of a formula. However, when the cell is being edited, the text alternative may be the formula itself.

gridcell elements with the aria-selected attribute set can be selected for user interaction, and if the aria-multiselectable attribute of the grid is set to true, multiple cells in the grid may be selected. Grids may be used for spreadsheets like those in desktop spreadsheet applications.

A grid is considered editable unless otherwise specified. To make a grid read-only, set the aria-readonly attribute of the grid to true. The value of the grid element's aria-readonly attribute is implicitly propagated to all of its owned gridcell elements, and will be exposed through the accessibility API. An author may override an individual gridcell element's propagated aria-readonly value by setting the aria-readonly attribute on the gridcell.

To be keyboard accessible, authors should  manage focus of descendants for all instances of this role.

Wherever possible, use the host mark-up to form relations adding aria roles and properties to aid the users of assistive technologies.

Microsoft Active Accessibility accRole Property: 

  • ROLE_SYSTEM_TABLE

UI Automation ControlType Property: 

  • DataGrid

UI Automation AriaRole Property: 

  • grid
More in this category: « gridcell form »