WAI-ARIA: Role=Gridcell

A cell in a grid or treegrid.

Description

A cell in a grid or treegrid.

A gridcell may be focusable, editable, and selectable. A gridcell may have relationships such as aria-controls to address the application of functional relationships.

If an author intends a gridcell to have a row header, column header, or both, and if the relevant headers cannot be determined from the DOM structure, authors SHOULD explicitly indicate which header cells are relevant to the gridcell by applying aria-describedby on the gridcell and referencing elements with role rowheader or columnheader.

In a treegrid, authors MAY define a gridcell as expandable by using the aria-expanded attribute. If the aria-expanded attribute is provided, it applies only to the individual cell. It is not a proxy for the container row, which also can be expanded. The main use case for providing this attribute on a gridcell is pivot table behavior.

Authors MUST ensure elements with role gridcell are contained in, or owned by, an element with the role row.

Screen Reader Support For Role=GridCell

Expectation	JAWS			Narrator	NVDA			Orca	TalkBack	VoiceOver (iOS)	VoiceOver (macOS)
	Chrome	Edge	Firefox	Edge	Chrome	Edge	Firefox	Firefox	Chrome	Safari	Safari
MUST convey its role	supported	supported	supported	supported	partial	partial	partial	partial	supported	none	partial
MUST convey its name	supported	supported	supported	supported	supported	supported	supported	supported	supported	supported	supported
MUST convey the position of the header (row/column) when row and columns exist	partial	partial	none	supported	supported	supported	supported	supported	supported	none	partial

Role=GridCell Example

HTML Example

The following example shows a grid with 16 columns, of which columns 2, 3, 4, and 9 are displayed to the user.

<div role="grid" aria-colcount="16">
  <div role="rowgroup">
    <div role="row">
      <span role="columnheader" aria-colindex="2">First Name</span> <span role="columnheader" aria-colindex="3">Last Name</span> <span role="columnheader" aria-colindex="4">Company</span> <span role="columnheader" aria-colindex="9">Phone</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <span role="gridcell" aria-colindex="2">Fred</span> <span role="gridcell" aria-colindex="3">Jackson</span> <span role="gridcell" aria-colindex="4">Acme, Inc.</span> <span role="gridcell" aria-colindex="9">555-1234</span>
    </div>
    <div role="row">
      <span role="gridcell" aria-colindex="2">Sara</span> <span role="gridcell" aria-colindex="3">James</span> <span role="gridcell" aria-colindex="4">Acme, Inc.</span> <span role="gridcell" aria-colindex="9">555-1235</span>
    </div>…
  </div>
</div>

HTML Example 2

<table role="grid">
  <thead>
    <!-- etc -->
  </thead>
  <tbody>
    <tr>
      <td role="gridcell">17</td>
      <td role="gridcell">64</td>
      <td role="gridcell">18</td>
    </tr>
  </tbody>
</table>

Characteristics

Superclass Role

• cell
• widget

Subclass Roles

• columnheader
• rowheader

Base Concept

• HTML td

Required Context Role

• row

Supported States and Properties

• aria-readonly
• aria-required
• aria-selected

Inherited States and Properties

• aria-atomic
• aria-busy (state)
• aria-colindex
• aria-colspan
• aria-controls
• aria-current (state)
• aria-describedby
• aria-details
• aria-disabled (state)
• aria-dropeffect
• aria-errormessage
• aria-expanded (state)
• aria-flowto
• aria-grabbed (state)
• aria-haspopup
• aria-hidden (state)
• aria-invalid (state)
• aria-keyshortcuts
• aria-label
• aria-labelledby
• aria-live
• aria-owns
• aria-relevant
• aria-roledescription
• aria-rowindex
• aria-rowspan

Name From

• contents
• author

Accessible Name Required

• True

Semantic HTML

No HTML element equivalent.

Reference

• WAI-ARIA 1.2 Specification
  Refer to the notes from the WAI-ARIA 1.2 specification for more information on role=gridcell.
• A11Y Support
  The screenreader compatibility for each of the ARIA attributes is taken from the A11Y Support. Please refer to the original source if screenreader compatibility is updated for role=gridcell.