docs.rodeo

MDN Web Docs mirror

ARIA: row role

{{AccessibilitySidebar}} 

An element with role="row" is a row of cells within a tabular structure. A row contains one or more cells, grid cells or column headers, and possibly a row header, within a grid, table or treegrid, and optionally within a rowgroup.

<div
  role="table"
  aria-label="Populations"
  aria-describedby="country_population_desc">
  <div id="country_population_desc">World Populations by Country</div>
  <div role="rowgroup">
    <div role="row">
      <span role="columnheader" aria-sort="descending">Country</span>
      <span role="columnheader" aria-sort="none">Population</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row">
      <span role="cell">Finland</span>
      <span role="cell">5.5 million</span>
    </div>
    <div role="row">
      <span role="cell">France</span>
      <span role="cell">67 million</span>
    </div>
  </div>
</div>

Description

The element with role="row" is a row within a grid, table, or treegrid, and optionally within a rowgroup that contains one or more cell, gridcell, columnheader, or rowheader elements within a static tabular structure. Using native HTML <tr> elements, whenever possible, is strongly encouraged.

To create an ARIA row, add role="row" to the container element. That row should be nested within a grid, table or treegrid. A group of rows can be nested within a grid, table or treegrid directly, or within a rowgroup in one of those containers. Each row contains child cells. These cells can be of different types, depending on whether they are column or row headers, or grid or regular cells.

A row can contain a number of attributes clarifying the row’s role, including aria-colindex, aria-level, aria-rowindex, and aria-selected.

If the row is within a treegrid, rows can include the aria-expanded attribute, using the attribute to indicate the present status. This is not the case for an ordinary table or grid, in which the aria-expanded attribute is not present.

To create an interactive widget that has a tabular structure, use the grid pattern instead. If the interaction provides for the selection state of individual cells, if left to right and top to bottom navigation is provided, or if the user interface allows the rearranging of cell order or otherwise changing individual cell order such as through drag and drop, use grid or treegrid instead.

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

Associated WAI-ARIA roles, states, and properties

Context roles

Descendant roles

States and properties

Keyboard Interactions

None

Required JavaScript features

None. For sortable columns, see the columnheader aria role.

[!NOTE] The first rule of ARIA use is you can use a native feature with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so. Employ the HTML {{HTMLElement('table')}}  element instead of the ARIA role of table 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 Role</span>
      <span role="columnheader" aria-sort="none">Semantic Element</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row" aria-rowindex="11">
      <span role="cell">header</span>
      <span role="cell">h1</span>
    </div>
    <div role="row" aria-rowindex="16">
      <span role="cell">header</span>
      <span role="cell">h6</span>
    </div>
    <div role="row" aria-rowindex="18">
      <span role="cell">rowgroup</span>
      <span role="cell">thead</span>
    </div>
    <div role="row" aria-rowindex="24">
      <span role="cell">term</span>
      <span role="cell">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. The header row, alone in a header rowgroup, has two column headers. The columns are sortable, but not currently sorted, as indicated by the aria-sort property. The table body is in a separate rowgroup, with four rows currently in the DOM. Because not all the rows are in the DOM, we’ve included the aria-rowindex property on every row.

Best practices

Only use {{HTMLElement('table')}} , {{HTMLElement('tbody')}} , {{HTMLElement('thead')}} , {{HTMLElement('tr')}} , {{HTMLElement('th')}} , {{HTMLElement('td')}} , etc., for data table structure. You can add these 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 Role</th>
      <th role="columnheader" aria-sort="none">Semantic Element</th>
    </tr>
  </thead>
  <tbody role="rowgroup">
    <tr role="row" aria-rowindex="11">
      <td role="cell">header</td>
      <td role="cell">h1</td>
    </tr>
    <tr role="row" aria-rowindex="16">
      <td role="cell">header</td>
      <td role="cell">h6</td>
    </tr>
    <tr role="row" aria-rowindex="18">
      <td role="cell">rowgroup</td>
      <td role="cell">thead</td>
    </tr>
    <tr role="row" aria-rowindex="24">
      <td role="cell">term</td>
      <td role="cell">dt</td>
    </tr>
  </tbody>
</table>

Above is the semantic way of writing a table. The ARIA roles are only necessary if the native semantics of the table, and therefore the table rows, are obliterated, such as via setting the display property to flex or grid.

Added benefits

none

Specifications

{{Specifications}} 

See also

In this article

View on MDN