WAI-ARIA: aria-rowcount (Property)
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 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
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 |
aria-rowcount 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
Inherits into Roles
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