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 For aria-rowindex

	desktop						mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet
ariaRowIndex	ChromeFull support81	EdgeFull support81	FirefoxNo supportNo	Internet ExplorerNo supportNo	OperaFull support68	SafariFull support12.1	WebView AndroidFull support81	Chrome AndroidFull support81	Firefox for AndroidNo supportNo	Opera AndroidFull support58	Safari on iOSFull support12.2	Samsung InternetFull support13.0

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

• W3C (opens new window)
• MDN Web Docs