aria-colindextext
The aria-colindextext
attribute defines a human-readable text alternative of the numeric aria-colindex
.
Description
When you have a very large table or when you purposefully want to display just a section of a table, not all columns may be present in the DOM. When this happens, we use the aria-colcount
with an integer value to define how many columns the table (or grid) would have if all the columns were present and add the aria-colindex
property on each column to provide information on the column index within that larger table.
In the following HTML snippet, our table has 8 columns, but we are only displaying 4. The "city" column is the fifth column of our larger table, as defined by aria-colindex="5"
.
<table aria-colcount="8">
<thead>
<tr>
<th aria-colindex="1" scope="col">First name</th>
<th aria-colindex="2" scope="col">Last name</th>
<th aria-colindex="5" scope="col">City</th>
<th aria-colindex="7" scope="col">Zip</th>
</tr>
</thead>
…
</table>
This table is not very complex. Had this been a 100+ column spreadsheet or a grid without column headers, such as a chess board, the provided or calculated value of aria-colindex
might not be meaningful or may not reflect the displayed index. When this is the case, aria-colindextext
can be included. The value is a string that is a human-readable text alternative to the numeric aria-colindex
.
<table aria-colcount="128">
<thead>
<tr>
<th aria-colindex="1" aria-colindextext="NYSE stock symbol" scope="col">
NYSE
</th>
<th
aria-colindex="110"
aria-colindextext="Value at start of 2021"
scope="col">
01/21
</th>
<th
aria-colindex="122"
aria-colindextext="Value at start of 2022"
scope="col">
01/22
</th>
<th aria-colindex="124" scope="col">Recommendation</th>
</tr>
</thead>
…
</table>
In the above example, the table has 128 columns of which only 4 columns are shown. The aria-colindextext
is used in three columns to provide human-readable text alternatives. By including aria-colindextext="Value at start of 2021"
, assistive technologies can announce "Value at start of 2021" instead of "Column 110".
Only use aria-colindextext
when the provided or calculated value of aria-colindex
is not meaningful or does not reflect the displayed index. Whenever you include aria-colindextext
, also keep the aria-colindex
as some assistive technologies rely on the numeric column index for the purpose of keeping track of the user's position and in providing alternative table navigation.
Note:
While aria-colindex
can be added to a row when all the columns present are contiguous as sequential values can be deduced, aria-colindextext
is NOT a supported property of row
.
See related aria-rowindextext
.
Values
<string>
-
The human-readable text alternative of the numeric
aria-colindex
Associated interfaces
Element.ariaColIndexText
-
The
ariaColIndexText
property, part of theElement
interface, reflects the value of thearia-colindextext
attribute. ElementInternals.ariaColIndexText
-
The
ariaColIndexText
property, part of theElementInternals
interface, reflects the value of thearia-colindextext
attribute.
Associated roles
Specifications
Specification |
---|
Accessible Rich Internet Applications (WAI-ARIA) # aria-colindextext |