WAI-ARIA: aria-rowindex (Property)

Description

Defines an element’s row index or position with respect to the total number of rows within a table, grid, or treegrid. See related aria-rowcount and aria-rowspan.

If all of the rows are present in the DOM, it is not necessary to set this attribute as the user agent can automatically calculate the index of each row. However, if only a portion of the rows is present in the DOM at a given moment, this attribute is needed to provide an explicit indication of each row’s position with respect to the full table.

Authors MUST set the value for aria-rowindex to an integer greater than or equal to 1, greater than the aria-rowindex value of any previous rows, and less than or equal to the number of rows in the full table. For a cell or gridcell which spans multiple rows, authors MUST set the value of aria-rowindex to the start of the span.

Authors SHOULD place aria-rowindex on each row. Authors MAY also place aria-rowindex on all of the children or owned elements of each row.

Browser Compatibility

aria-rowindex Example

HTML Example

The following example shows a grid with 2000 rows, of which the first row and rows 100 through 102 are displayed to the user.

<div role="grid" aria-rowcount="2000">
  <div role="rowgroup">
    <div role="row" aria-rowindex="1">
      <span role="columnheader">First Name</span> <span role="columnheader">Last Name</span> <span role="columnheader">Company</span> <span role="columnheader">Phone</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row" aria-rowindex="100">
      <span role="gridcell">Fred</span> <span role="gridcell">Jackson</span> <span role="gridcell">Acme, Inc.</span> <span role="gridcell">555-1234</span>
    </div>
    <div role="row" aria-rowindex="101">
      <span role="gridcell">Sara</span> <span role="gridcell">James</span> <span role="gridcell">Acme, Inc.</span> <span role="gridcell">555-1235</span>
    </div>
    <div role="row" aria-rowindex="102">
      <span role="gridcell">Taylor</span> <span role="gridcell">Johnson</span> <span role="gridcell">Acme, Inc.</span> <span role="gridcell">555-1236</span>
    </div>
  </div>
</div>

HTML Example 2

The following example shows the grid from the previous example with aria-rowindex also placed on all of the owned elements of each row.

<div role="grid" aria-rowcount="2000">
  <div role="rowgroup">
    <div role="row" aria-rowindex="1">
      <span role="columnheader" aria-rowindex="1">First Name</span> <span role="columnheader" aria-rowindex="1">Last Name</span> <span role="columnheader" aria-rowindex="1">Company</span> <span role="columnheader" aria-rowindex="1">Phone</span>
    </div>
  </div>
  <div role="rowgroup">
    <div role="row" aria-rowindex="100">
      <span role="gridcell" aria-rowindex="100">Fred</span> <span role="gridcell" aria-rowindex="100">Jackson</span> <span role="gridcell" aria-rowindex="100">Acme, Inc.</span> <span role="gridcell" aria-rowindex="100">555-1234</span>
    </div>
    <div role="row" aria-rowindex="101">
      <span role="gridcell" aria-rowindex="101">Sara</span> <span role="gridcell" aria-rowindex="101">James</span> <span role="gridcell" aria-rowindex="101">Acme, Inc.</span> <span role="gridcell" aria-rowindex="101">555-1235</span>
    </div>
    <div role="row" aria-rowindex="102">
      <span role="gridcell" aria-rowindex="102">Taylor</span> <span role="gridcell" aria-rowindex="102">Johnson</span> <span role="gridcell" aria-rowindex="102">Acme, Inc.</span> <span role="gridcell" aria-rowindex="102">555-1236</span>
    </div>
  </div>
</div>

Characteristics

Used in Roles

• cell
• row

Inherits into Roles

• columnheader
• gridcell
• rowheader

Value

• integer
  • A numerical value without a fractional component.

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 aria-rowindex.
• MDN Web Docs
  The browser compatibility for each of the ARIA attributes is taken from the MDN Web Docs. Please refer to the original source if browser compatibility is updated for aria-rowindex.