Overview
As discussed in aria-colcount(property) post, at time, author might not want to show all the total columns of the table in the DOM due to the usage of advance filters and so on rather author might want to show only portion of the columns in the DOM. When author wants to show only the portion of the columns of the table in the DOM then it is suggested to use aria-colcount property to communicate the total no of columns to the assistive technology users. Up to this, we are clear with the concept. However, using aria-colcount alone would not be sufficient to convey all the table properties to the assistive technology users. Since only the portion of the columns are visible in the DOM, assistive technologies like screen readers do not understand which cell/column has the data. As a result, screen readers might end up with incorrect column index announcements when user navigates through the table and it is a problem.
In order to address this problem, aria1.1 introduced the new brand table property and that is aria-colindex. When aria-colindex property is set on the cell container of the table then screen readers would understand column index of that cell and announces the column index accordingly. Let me elaborate this little bit more. As have been discussing, this property should be used only the portion of the columns of the tables are available in the DOM. By considering this important point in the mind, let us think there are 4 columns(column2, column3, colunm5, and column9) of the table are available in the DOM out of 16 total columns. If aria-colindex is set as 2 for the column2 cell then screen readers would announce the column2 and this announcement is appropriate. Failing to set this attribute may result the incorrect column index announcements by screen reader software and this intern confuses the users a lot. When aria-colcount is set for the complete table container then it is necessary to set the aria-colindex to define the position of the visible column of that table.
In a broader view, aria-colindex Defines an element’s column index or position with respect to the total number of columns within a table, grid, or treegrid.
Author notes
- Authors should use this property for the below roles only<
- Cell
- Row
- Column header
- Gridcell
- Rowheader
- Authors should not set/define this attribute If all of the columns are present in the DOM as user agent can automatically calculate the column index of each cell or gridcell
- Authors should set/define this attribute only when 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,
- Aria-colindex must be greater than the aria-colindex value of any previous elements within the same row,
- Aria-colindex must be less than or equal to the number of columns in the full table
- aria-colindex cannot be greater than aria-colcount, unless aria-colcount is unknown (e.g. value -1)
- aria-colindex must be set on the start of the span if the cell or gridcell spans multiple columns or multiple rows
- 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,<
- aria-colindex is not needed to set on the every cell
- aria-colindex can be set on the row element with a value equal to the the index number of the first column in the set. Browsers will then compute a column number for each cell in the row.
- aria-colindex needs to be set on each cell in the row If the set of columns which is present in the DOM is noncontiguous
Sample code snippet
if given
<div role=”table”>
<div role=”row”>
<div id=”SD” role=”cell” aria-colindex=”4″ aria-colcount=”8″>suman damera</div>
</div>
</div>
then expose aria-colindex=”4″ on the element with id=”SD”
References
- aria1.1 specification-aria-colindex(property)
- WAI aria1.1 authoring practices:aria-colindex(property)