WAI-ARIA: aria-colcount (Property)
Description
Defines the total number of columns in a table, grid, or treegrid. See related aria-colindex.
If all of the columns are present in the DOM, it is not necessary to set this attribute as the user agent can automatically calculate the total number of columns. However, if only a portion of the columns is present in the DOM at a given moment, this attribute is needed to provide an explicit indication of the number of columns in the full table.
Authors MUST set the value of aria-colcount to an integer equal to the number of columns in the full table. If the total number of columns is unknown, authors MUST set the value of aria-colcount to -1 to indicate that the value should not be calculated by the user agent.
Browser Compatibility
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
ariaColCount | 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
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 column count when some columns are hidden | supported | supported | supported | supported | supported | supported | supported | unknown | none | none | none |
MUST NOT convey a column count when total column count is unknown | none | none | none | none | none | none | none | unknown | none | none | none |
aria-colcount Example
The following example shows a grid with 16 columns, of which columns 2, 3, 4, and 9 are displayed to the user.
<div role="grid" aria-colcount="16">
<div role="rowgroup">
<div role="row">
<span role="columnheader" aria-colindex="2">First Name</span> <span role="columnheader" aria-colindex="3">Last Name</span> <span role="columnheader" aria-colindex="4">Company</span> <span role="columnheader" aria-colindex="9">Phone</span>
</div>
</div>
<div role="rowgroup">
<div role="row">
<span role="gridcell" aria-colindex="2">Fred</span> <span role="gridcell" aria-colindex="3">Jackson</span> <span role="gridcell" aria-colindex="4">Acme, Inc.</span> <span role="gridcell" aria-colindex="9">555-1234</span>
</div>
<div role="row">
<span role="gridcell" aria-colindex="2">Sara</span> <span role="gridcell" aria-colindex="3">James</span> <span role="gridcell" aria-colindex="4">Acme, Inc.</span> <span role="gridcell" aria-colindex="9">555-1235</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
- WAI-ARIA 1.2 Specification
Refer to the notes from the WAI-ARIA 1.2 specification for more information on aria-colcount. - A11Y Support
The screenreader compatibility for each of the ARIA attributes is taken from the A11Y Support. Please refer to the original source if screenreader compatibility is updated for aria-colcount. - MDN Web Docs
The browser compatibility for each of the ARIA attributes is taken from the MDN Web Docs. Please refer to the original source if browser compatibility is updated for aria-colcount.