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.