Let us understand how does assistive technologies like screen reader identifies the column count and row count in the table. It is very simple. Screen reader looks at the DOM and calculates how many rows and how many columns are present in the table. Based on that, screen reader would announce the no of columns and no of rows as accordingly. When table receives the focus, For the instance, screen reader would announce like “table with 16 columns and 3 rows” or something like that. The announcement of 16 columns could be appropriate as DOM contains 16 columns. Let me be very specific with the column count and I would not talk much about row count in this post. However, at times, author might have to hide few columns and show only few other columns. In this case, screen reader announcement may not be appropriate with respect to the total number of columns. I think I confused you a lot. Let us understand this with the simple hypothesis example.
There is table with 16 columns in total. Out of 16 columns, 12 columns are hidden and 4 of them are visually shown. Even DOM contains 4 columns itself. We see this type of show and hide columns when we apply filters in the few applications. In any case, When we run screen reader on this table then obviously screen reader would announce it as “table with 4 columns”. Do you think this announcement is appropriate? Answer is yes and no. The reason for yes is that screen reader announces the whatever the DOM contains. The reason for no is that there are 16 columns in total but screen reader user is not aware of this information with the announcement that is being made currently(just to reiterate, the announcement from the screen reader is “table with 4 columns”). In a nutshell, the information about the total no of columns is not being announced to the screen reader users along with the visible number of columns and this is problem.
In order to address this problem, aria 1.1 introduced new attribute called aria-colcount. When this property is applied with some integer value to the table container then screen reader would announce the visible no of columns as well as total no of columns. Let me take the same above hypothesis example. When aria-colcount property is defined with 16 to the above table container then screen reader is expected to announce it as “table with 4 of 16 columns” something like that. With this announcement, screen reader user would understand that there are 4 visible columns out of 16 total columns. .
In a broader view, When the number of columns represented by the DOM structure is not the total number of columns available for a table, grid, or treegrid, the aria-colcount property is used to communicate the total number of columns available, and it is accompanied by the aria-colindex property to identify the column indices of the columns that are present in the DOM.
Author notes
- Author should use this property for the below roles only
- Table
- Grid
- Treegrid
- Author should not use this property when all the columns are present in the DOM
- Author should use this property only when portion of columns is present in the DOM at a given moment,
- Authors MUST set the value of aria-colcount to an integer equal to the number of columns in the full table.
- authors MUST set the value of aria-colcount to -1 if the total no of columns is unknown to indicate that the value should not be calculated by the assistive technologies.
Example
The following example shows a grid with 16 columns, of which columns 2, 3, 4, and 9 are displayed to the user.
<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>
References
thank you for the post. it’s very helpful I was looking for more info grids.