• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Logo for DigitalA11Y

Digital A11Y

Your Accessibility Partner

  • About
    • Bio
      • Conference Speaking
      • Videos
      • mentions
  • Articles
  • Resources
    • WAI-ARIA
    • WCAG
    • Cheat Sheets
    • A11Y Blogs
    • A11Y Toolkit
  • Contact
You are here: Home / aria-rowindex(properties)

aria-rowindex(properties)

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.

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

Share A11Y Love

  • Twitter
  • LinkedIn
  • Facebook
  • Reddit

Primary Sidebar

Get Digital A11Y in Your Inbox

Recent A11Y Articles

  • WCAG 2.1 Checklist
  • A Sneak peek into WCAG 3.0 First Public Draft
  • Understanding SC 4.1.3 Status messages
  • Understanding SC 2.5.4 Motion Actuation
  • Understanding SC 2.5.3 Label in Name

Recent Comments

  • Isaac Williams on Digital Accessibility Companies Roundup
  • Vaibhav Mishra on Understanding SC 3.3.1 Error Identification
  • Vaibhav Mishra on Understanding SC 1.3.2 Meaningful Sequence
  • Donal Rice on Digital Accessibility Companies Roundup
  • Rajath on A Sneak peek into WCAG 3.0 First Public Draft

A11Y Categories

  • Design
  • Events
  • HTML
  • IOS
  • Mobile Accessibility
  • News
  • Tools
  • WAI-ARIA
  • WCAG
  • Web Accessibility

  • Privacy Policy
  • Sitemap
© 2021 Digital A11Y