Defines an element’s row index or position with respect to the total number of rows within a table, grid, or treegrid. 

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

desktopmobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung Internet
ariaRowIndex

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

Inherits into Roles

Value

  • integer
    • A numerical value without a fractional component.

Semantic HTML

No HTML element equivalent.

Reference

Share A11Y Love

Leave a Reply

Your email address will not be published.