WAI-ARIA: aria-colindex (Property)

Description

Defines an element’s column index or position with respect to the total number of columns within a table, grid, or treegrid. See related aria-colcount and aria-colspan.

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 column index of each cell or gridcell. 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 column of each cell or gridcell with respect to the full table.

Authors MUST set the value for aria-colindex to an integer greater than or equal to 1, greater than the aria-colindex value of any previous elements within the same row, and less than or equal to the number of columns in the full table. For a cell or gridcell which spans multiple columns, authors MUST set the value of aria-colindex to the start of the span.

If the set of columns which is present in the DOM is contiguous, and if there are no cells which span more than one row or column in that set, then authors MAY place aria-colindex on each row, setting the value to the index of the first column of the set. Otherwise, authors SHOULD place aria-colindex on all of the children or owned elements of each row.

Browser Compatibility For aria-colindex

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

Example

HTML Example

The following example shows a grid with 16 columns, of which columns 2 through 5 are displayed to the user. Because the set of columns is contiguous, aria-colindex can be placed on each row.

<div role="grid" aria-colcount="16">
<div role="rowgroup">
<div role="row" aria-colindex=”2″>
<span role="columnheader">First Name</span>
<span role="columnheader">Last Name</span>
<span role="columnheader">Company</span>
<span role="columnheader">Address</span>
</div>
</div>
<div role="rowgroup">
<div role="row" aria-colindex=”2″>
<span role="gridcell">Fred</span>
<span role="gridcell">Jackson</span>
<span role="gridcell">Acme, Inc.</span>
<span role="gridcell">123 Broad St.</span>
</div>
<div role="row" aria-colindex=”2″>
<span role="gridcell">Sara</span>
<span role="gridcell">James</span>
<span role="gridcell">Acme, Inc.</span>
<span role="gridcell">123 Broad St.</span>
</div>
…
</div>
</div>

The following example shows a grid with 16 columns, of which columns 2 through 5 are displayed to the user. While the set of columns is contiguous, some of the cells span multiple rows. As a result, aria-colindex needs to be placed on all of the owned elements of each row.

<div role="grid" aria-colcount="16">
<div role="rowgroup">
<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=”5″>Address</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″ aria-rowspan="2">Acme, Inc.</span>
<span role="gridcell" aria-colindex=”5″ aria-rowspan="2">123 Broad St.</span>
</div>
<div role="row">
<span role="gridcell" aria-colindex=”2″>Sara</span>
<span role="gridcell" aria-colindex=”3″>James</span>
</div>…
</div>
</div>

The following example shows a grid with 16 columns, of which columns 2, 3, 4, and 9 are displayed to the user. Because the set of columns is non-contiguous, aria-colindex needs to be placed on all of the owned elements of each row.

<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

• cell
• row

Inherits into Roles

• columnheader
• gridcell
• rowheader

Value

• integer
  • A numerical value without a fractional component.

Semantic HTML

No HTML element equivalent.

Reference

• W3C (opens new window)
• MDN Web Docs