Semantics

A cell in a grid or treegrid.

Additional info from the ARIA specification

A gridcell can be focusable, editable, and selectable. A gridcell can 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 accessibility children of an element with the role row.

Abstract Role

  • WidgetRepresents a focusable, interactive element.

Content Category

Only Used with Specific Parent Roles

This role must be a direct descendant of one of the following roles:

  • row

Allowed Descendants

Flow Children Allowed

No main element descendants allowed.

Usage

Allowed HTML elements

Implicit semantics

  • None

Explicitly allowed

  • td[role=gridcell]

Elements that can have any role

  • abbr[role=gridcell]
  • address[role=gridcell]
  • b[role=gridcell]
  • blockquote[role=gridcell]
  • canvas[role=gridcell]
  • cite[role=gridcell]
  • code[role=gridcell]
  • custom-element[role=gridcell]
  • data[role=gridcell]
  • del[role=gridcell]
  • dfn[role=gridcell]
  • div[role=gridcell]
  • em[role=gridcell]
  • figure[role=gridcell]
  • i[role=gridcell]
  • ins[role=gridcell]
  • kbd[role=gridcell]
  • mark[role=gridcell]
  • output[role=gridcell]
  • p[role=gridcell]
  • pre[role=gridcell]
  • q[role=gridcell]
  • samp[role=gridcell]
  • small[role=gridcell]
  • span[role=gridcell]
  • table[role=gridcell]
  • tbody[role=gridcell]
  • tfoot[role=gridcell]
  • thead[role=gridcell]
  • time[role=gridcell]
  • u[role=gridcell]
  • var[role=gridcell]