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

aria-colindex 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>

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

• WAI-ARIA 1.2 Specification
  Refer to the notes from the WAI-ARIA 1.2 specification for more information on aria-colindex.
• 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-colindex.