docs.rodeo

MDN Web Docs mirror

ARIA: cell role

{{AccessibilitySidebar}} 

The cell value of the ARIA role attribute identifies an element as being a cell in a tabular container that does not contain column or row header information. To be supported, the cell must be nested in an element with the role of row.

<div role="row">
  <span role="cell">France</span>
  <span role="cell">67 million</span>
</div>

A better, more semantic way of writing the cells above would be to use the semantic <td> element.

<tr role="row">
  <td role="cell">France</td>
  <td role="cell">67 million</td>
</tr>

Description

The element with role="cell" is a cell within a row, optionally within a rowgroup, within a table. If the cell is in a grid or treegrid, opt for gridcell. Using native HTML {{HTMLElement('td')}}  elements, whenever possible, is strongly encouraged.

Each element with role="cell" MUST be nested in a container element with role="row". That row, in turn, can be nested within an element with role="rowgroup", and should be nested within a grid, table or treegrid. If a cell contains column or row header information, use the columnheader or rowheader roles, respectively. If the cell does not contain header information and is nested in a grid or treegrid, the role of gridcell may be more appropriate.

A cell can contain a number of property attributes clarifying the cell’s position within the tabular data structure, including aria-colindex, aria-colspan, aria-rowindex, and aria-rowspan.

[!NOTE] Using the native HTML table element ({{HTMLElement('table')}} ) element, along with the table row element ({{HTMLElement('tr')}} ), and table cell element ({{HTMLElement('td')}} ), whenever possible, is strongly encouraged.

Associated WAI-ARIA roles, states, and properties

Context roles

Subclass roles

States and properties

Keyboard interactions

None

Required JavaScript features

The first rule of ARIA use is if you can use a native feature with the semantics and behavior you require already built in, instead of repurposing an element and adding an ARIA role, state or property to make it accessible, then do so. Employ the HTML <td> element instead of the ARIA role of cell whenever possible.

Examples

<div
  role="table"
  aria-label="Semantic Elements"
  aria-describedby="semantic_elements_table_desc"
  aria-rowcount="81">
  <div id="semantic_elements_table_desc">
    Semantic Elements to use instead of ARIA's roles
  </div>
  <div role="rowgroup">
    <div role="row">
      <span role="columnheader" aria-sort="none" aria-rowindex="1"
        >ARIA Role</span
      >
      <span role="columnheader" aria-sort="none" aria-rowindex="1"
        >Semantic Element</span
      >
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <span role="cell" aria-rowindex="11">header</span>
      <span role="cell" aria-rowindex="11">h1</span>
    </div>
    <div role="row">
      <span role="cell" aria-rowindex="16">header</span>
      <span role="cell" aria-rowindex="16">h6</span>
    </div>
    <div role="row">
      <span role="cell" aria-rowindex="18">rowgroup</span>
      <span role="cell" aria-rowindex="18">thead</span>
    </div>
    <div role="row">
      <span role="cell" aria-rowindex="24">term</span>
      <span role="cell" aria-rowindex="24">dt</span>
    </div>
  </div>
</div>

The above is a non-semantic ARIA table with five of 81 rows present in the DOM: one within a table header and four rows within the table body. Because not all the rows are in the DOM, we’ve included the aria-rowindex property on every cell. If no cells spanned more than one row or column, the aria-rowindex could have been placed on the row rather than the row’s individual cells.

Best practices

Only use {{HTMLElement('table')}} , {{HTMLElement('tbody')}} , {{HTMLElement('thead')}} , {{HTMLElement('tr')}} , {{HTMLElement('th')}} , {{HTMLElement('td')}} , etc., for data table structure. You can add ARIA roles to ensure accessibility should the native semantics of the table be removed, such as with CSS. A relevant use case for the ARIA table role is when the native semantics of a table are overridden by CSS’s display property, such as by display: grid. In this case, you can use the ARIA table roles to add the semantics back in.

<table
  role="table"
  aria-label="Semantic Elements"
  aria-describedby="semantic_elements_table_desc"
  aria-rowcount="81">
  <caption id="semantic_elements_table_desc">
    Semantic Elements to use instead of ARIA's roles
  </caption>
  <thead role="rowgroup">
    <tr role="row">
      <th role="columnheader" aria-sort="none" aria-rowindex="1">ARIA Role</th>
      <th role="columnheader" aria-sort="none" aria-rowindex="1">
        Semantic Element
      </th>
    </tr>
  </thead>
  <tbody role="rowgroup">
    <tr role="row">
      <td role="cell" aria-rowindex="11">header</td>
      <td role="cell" aria-rowindex="11">h1</td>
    </tr>
    <tr role="row">
      <td role="cell" aria-rowindex="16">header</td>
      <td role="cell" aria-rowindex="16">h6</td>
    </tr>
    <tr role="row">
      <td role="cell" aria-rowindex="18">rowgroup</td>
      <td role="cell" aria-rowindex="18">thead</td>
    </tr>
    <tr role="row">
      <td role="cell" aria-rowindex="24">term</td>
      <td role="cell" aria-rowindex="24">dt</td>
    </tr>
  </tbody>
</table>

Above is the semantic way of writing a table. The ARIA roles are not necessary if the native semantics of the table, and therefore the table rows, have not been altered, such as through the display property.

Added benefits

When applied to a {{HTMLElement('td')}} , it returns cell semantics to the element in case the semantics were removed, such as with display: grid;.

Specifications

{{Specifications}} 

See also

In this article

View on MDN