ARIA: gridcell role

Any element with a role="gridcell" applied to it should use ARIA to describe its order in the table-style grouping, provided the table, grid, or treegrid has the ability to have rows and/or columns dynamically added, hidden, or removed.

Use aria-colindex to describe a gridcell's order in the list of columns, and aria-rowindex to describe a gridcell's order in the list of rows. Use aria-colcount and aria-rowcount on the parent element with role="grid" applied to it to set the total number of columns or rows.

This sample code demonstrates a table-style grouping of information where the third and fourth columns have been removed. aria-colindex is being used to describe the rows' position and allows a person using assistive technology to infer that certain rows have been removed:

<div role="grid" aria-colcount="6">
  <div role="rowgroup">
    <div role="row">
      <div role="columnheader" aria-colindex="1">First name</div>
      <div role="columnheader" aria-colindex="2">Last name</div>
      <div role="columnheader" aria-colindex="5">City</div>
      <div role="columnheader" aria-colindex="6">Zip</div>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <div role="gridcell" aria-colindex="1">Debra</div>
      <div role="gridcell" aria-colindex="2">Burks</div>
      <div role="gridcell" aria-colindex="5">New York</div>
      <div role="gridcell" aria-colindex="6">14127</div>
    </div>
  </div>
  …
</div>

In situations where the table-style grouping of content does not provide information about the columns and rows, gridcells must have their positions programmatically described by using aria-describedby. The ids provided for aria-describedby should correspond to parent elements intended to be the rows and columns.

By referencing the parent elements with roles of rowheader or columnheader applied to them via aria-describedby, it allows assistive technology to understand the position and relationship of the gridcell element to the rest of the table-style grouping of content.

Editable cells

Both <td> elements and elements with a role of gridcell applied to them can be made editable, mimicking functionality similar to editing a spreadsheet. This is done by applying the HTML contenteditable attribute.

<td contenteditable="true">Notes</td>

<div role="gridcell" contenteditable="true">Item cost</div>

contenteditable will make the element it is applied to focusable via the Tab key. If a gridcell is conditionally toggled into a state where editing is prohibited, toggle aria-readonly on the gridcell element.

Expandable cells

In a treegrid, gridcells may be made expandable by toggling the aria-expanded attribute. Note that if this attribute is provided, it applies only to the individual gridcell.

grid

Communicates that a parent element is a table or tree style grouping of information.

row

Required to communicate the gridcell is part of a row of a table-style grouping of information.

columnheader

Specifies which element is the associated column header.

aria-colindex

Identifies the position of an element in relation to the rest of the table-style grouping of information's columns.

rowheader

Specifies which element is the associated row header.

aria-rowindex

Identifies the position of an element in relation to the rest of the table-style grouping of information's rows.

The following example creates a table-style grouping of information:

<h3 id="table-title">Jovian gas giant planets</h3>
<div role="grid" aria-describedby="table-title">
  <div role="rowgroup">
    <div role="row">
      <div role="columnheader">Name</div>
      <div role="columnheader">Diameter (km)</div>
      <div role="columnheader">Length of day (hours)</div>
      <div role="columnheader">Distance from Sun (10<sup>6</sup>km)</div>
      <div role="columnheader">Number of moons</div>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <div role="gridcell">Jupiter</div>
      <div role="gridcell">142,984</div>
      <div role="gridcell">9.9</div>
      <div role="gridcell">778.6</div>
      <div role="gridcell">67</div>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <div role="gridcell">Saturn</div>
      <div role="gridcell">120,536</div>
      <div role="gridcell">10.7</div>
      <div role="gridcell">1433.5</div>
      <div role="gridcell">62</div>
    </div>
  </div>
</div>

Support for gridcell and certain gridcell related ARIA roles and properties have poor support with assistive technologies. If at all possible, use HTML table markup in their place.

The first rule of ARIA is: if a native HTML element or attribute has the semantics and behavior you require, use it instead of re-purposing an element and adding an ARIA role, state or property to make it accessible. As such, it is recommended to use native HTML table markup instead of recreating a table's form and functionality with ARIA and JavaScript.

• The Table element
• ARIA: Grid role
• Grid Role - Maxability
• The Table row element
• ARIA: row role
• Row Role - Maxability
• aria-rowcount - Maxability
• ARIA: rowgroup role
• Rowgroup Role - Maxability
• The Table header element
• Columnheader - Maxability
• aria-colcount - Maxability
• The Table Data Cell element
• gridcell: Accessible Rich Internet Applications (WAI-ARIA) 1.1
• Gridcell Role - Maxability