Overview
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 10 rows” or something like that. The announcement of 10 rows could be appropriate as DOM contains 3 rows. Let me be very specific with the row count in this post. However, at times, author might have to hide few rows and show only few other rows. In this case, screen reader announcement may not be appropriate with respect to the total number of rows. I think I confused you a lot. Let us understand this with the simple hypothesis example.
There is table with 10 rows in total. Out of 10 rows, 6 rows are hidden and 4 of them are visually shown. Even DOM contains 4 rows itself. We see this type of show and hide rows when we apply filters in the few applications and it is kind of how we do in the MS excel. In any case, When we run screen reader on this table then obviously screen reader would announce it as “table with 4 rows”. Do you think this announcement is correct? 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 10 rows 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 rows”). In a nutshell, the information about the total no of rows is not being announced to the screen reader users along with the visible number of rows and this is problem.
In order to address this problem, aria 1.1 introduced new attribute called aria-rowcount. 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-rowcount property is defined with 10 to the above table container then screen reader is expected to announce it as “table with 4 of 10 rows” something like that. With this announcement, screen reader user would understand that there are 4 visible rows out of 10 total rows. .
In a broader view, When the number of rows represented by the DOM structure is not the total number of rows available for a table, grid, or treegrid, the aria-rowcount property is used to communicate the total number of rows available, and it is accompanied by the aria-rowindex property to identify the row indices of the rows that are present in the DOM.
Author notes
- Author must use this property for the below roles only
- Table
- Grid
- Treegrid
- Author should not use this property when all the rows are present in the DOM
- Author must use this property only when portion of rows is present in the DOM at a given moment,
- Authors MUST set the value of aria-rowcount to an integer equal to the number of rows in the full table.
- authors MUST set the value of aria-rowcount to -1 if the total no of rows is unknown to indicate that the value should not be calculated by the assistive technologies.
Sample code snippet
…
if given
<div role=’table’ id=’sd’ aria-rowcount=’3′ aria-colcount=’2′>
<div role=’row’>
<span role=’cell’>banana</span>
</div>
</div>
then expose aria-rowcount=”3″ on the element with id=”sd”
References