WAI-ARIA:aria-rowcount(Property)

Defines the total number of rows in a table, grid, or treegrid. 

Description

Defines the total number of rows in a table, grid, or treegrid. See related aria-rowindex.

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 total number of rows. 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 the number of rows in the full table.

Authors MUST set the value of aria-rowcount to an integer equal to the number of rows in the full table. If the total number of rows is unknown, authors MUST set the value of aria-rowcount to -1 to indicate that the value should not be calculated by the user agent.

Browser Compatibility For aria-rowcount

	desktop						mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet
ariaRowCount	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

Screen Reader Support For aria-rowcount

Expectation	JAWS			Narrator	NVDA			Orca	TalkBack	VoiceOver (iOS)	VoiceOver (macOS)
	Chrome	Edge	Firefox	Edge	Chrome	Edge	Firefox	Firefox	Chrome	Safari	Safari
MUST convey the total row count when some rows are hidden	supported	supported	supported	supported	supported	supported	supported	unknown	none	none	supported
MUST NOT convey a row count when total row count is unknown	none	none	none	none	none	none	none	unknown	none	none	none

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>

Characteristics

Used in Roles

• table

Inherits into Roles

• grid
• treegrid

Value

• integer
  • A numerical value without a fractional component.

Semantic HTML

No HTML element equivalent.

Reference

• W3C (opens new window)
• A11Y Support
• MDN Web Docs