The HTML aria-colindextext attribute
With aria-colindextext, a cell can report a column label such as AA where the number would be 27. It's a WAI-ARIA 1.3 draft addition that 1.2 lacks, and it shouldn't replace aria-colindex.
Overview
The aria-colindextext attribute defines a human-readable text alternative for the number in aria-colindex. Only WAI-ARIA 1.3 has it, in a draft dated June 4, 2026, and version 1.2, the W3C Recommendation, stops at the number.
Use it only when the provided or calculated aria-colindex isn't meaningful or doesn't reflect the displayed index, as in spreadsheets and chess boards. Column 27 of a spreadsheet is labeled AA, so the number and the label disagree.
A sales sheet that shows 3 of its 40 columns can give column 31 aria-colindextext="Q3 total", so assistive technology can announce that phrase instead of column 31.
It goes on cells, meaning the draft's cell role and the header and grid cell roles that inherit from it. A native <td> qualifies too, and the text is exposed there with or without aria-colindex beside it.
Chrome and Firefox don't pass a value on a <th> down to the cells below it, so repeat the label on each cell of the column.
Syntax
<div role="grid" aria-label="Budget sheet" aria-colcount="702">
<div role="row">
<span role="gridcell" aria-colindex="27"
aria-colindextext="AA">AA1</span>
</div>
</div>Values
| Value |
|---|
| A string. |
Example
<form id="jump" novalidate>
<label for="col">Jump to column (1 to 700)</label>
<input id="col" type="number" min="1" max="700" value="27" style="width: 5em">
<button>Go</button>
</form>
<table id="sheet" aria-colcount="702" aria-label="Budget sheet" style="border-collapse: collapse; margin-top: 8px">
<thead id="head"></thead>
<tbody id="rows"></tbody>
</table>
<p role="status" id="state"></p>
<script>
const input = document.getElementById('col');
const head = document.getElementById('head');
const rows = document.getElementById('rows');
const state = document.getElementById('state');
function letters(n) {
let text = '';
while (n > 0) {
n -= 1;
text = String.fromCharCode(65 + n % 26) + text;
n = Math.floor(n / 26);
}
return text;
}
function addCell(row, tag, column, text) {
const cell = document.createElement(tag);
cell.textContent = text;
cell.style.padding = '2px 10px';
cell.setAttribute('aria-colindex', column);
cell.setAttribute('aria-colindextext', letters(column));
if (tag === 'th') cell.scope = 'col';
row.appendChild(cell);
}
function show() {
const n = Number(input.value);
if (input.value === '' || !Number.isInteger(n) || n < 1 || n > 700) {
state.textContent = 'Enter a whole number from 1 to 700.';
return;
}
const kept = [n, n + 1, n + 2];
head.replaceChildren();
rows.replaceChildren();
const top = head.insertRow();
kept.forEach(column => addCell(top, 'th', column, letters(column)));
[1, 2].forEach(number => {
const row = rows.insertRow();
kept.forEach(column => addCell(row, 'td', column, letters(column) + number));
});
state.textContent = 'Column ' + n + ' is labeled ' + letters(n) + '. Its cells carry aria-colindex ' + n + ' and aria-colindextext ' + letters(n) + '.';
}
document.getElementById('jump').addEventListener('submit', event => {
event.preventDefault();
show();
});
show();
</script>Best practices
- Add aria-colindextext where the column number and the visible label disagree. Leave it off ordinary tables, where the calculated aria-colindex already fits.
- Match the label people see when the column shows one. A column headed AA takes the text AA.
- Translate the value when you localize the page, since the draft lists it as a translatable attribute.
- Keep the text on cells even if aria-colindex sits on the row. The row form of aria-colindex has no text counterpart.
Frequently asked questions
Why can't aria-colindextext go on a row?
Can aria-colindextext replace aria-colindex?
Do browsers support aria-colindextext?
Does aria-colindextext have a DOM property?
ariaColIndexText property. It's available in Chrome 128, Firefox 119 and Safari 26.2.
