Overview
As discussed in aria-rowcount post, at time, author might not want to show all the total rows 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 rows in the DOM. When author wants to show only the portion of the rows of the table in the DOM then it is suggested to use aria-rowcount property to communicate the total no of rows to the assistive technology users. Up to this, we are clear with the concept. However, using aria-rowcount alone would not be sufficient to convey all the table properties to the assistive technology users. Since only the portion of the rows are visible in the DOM, assistive technologies like screen readers do not understand which cell/row has the data. As a result, screen readers might end up with incorrect row 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-rowindex. When aria-rowindex property is set on the cell container of the table then screen readers would understand row index of that cell and announces the row index accordingly. Let me elaborate this little bit more. As we have been discussing, this property should be used only when the portion of the rows in the tables are available in the DOM. By considering this important point in the mind, let us think there are 4 rows(row2, row3, row5, and row9) of the table are available in the DOM out of 20 total rows. If aria-rowindex is set as 2 for the row2 cell then screen readers would announce the row2 and this announcement is appropriate. Failing to set this attribute may result the incorrect row index announcements by screen reader software and this intern confuses the users a lot. When aria-rowcount is set for the complete table container then it is necessary to set the aria-rowindex to define the position of the visible row of that table.
In a broader view, aria-rowindex Defines an element’s row index or position with respect to the total number of rows within a table, grid, or treegrid.
Author notes
- Aria-rowindex property must be used for the below roles only
- Cell
- Row
- Column header
- Gridcell
- Rowheader
- Authors should not set/define this attribute If all of the rows are present in the DOM as user agent can automatically calculate the row index of each cell or gridcell
- Authors should set/define this attribute only when portion of the rows is present in the DOM at a given moment
- Aria-rowindex attribute is needed to provide an explicit indication of the row position
- Authors MUST set the value for aria-rowindex to an integer greater than or equal to 1,
- Aria-rowindex must be greater than the aria-rowindex value of any previous rows
- Aria-rowindex must be less than or equal to the number of rows in the full table
- aria-rowindex cannot be greater than aria-rowcount, unless aria-rowcount is unknown (e.g. value -1)
- aria-rowindex must be set on the start of the span if the cell or gridcell spans multiple rows
Sample code snippet
if given
<div role=”table”>
<div role=”row”>
<div id=”sd” role=”cell” aria-rowindex=”5″>test</div>
</div>
</div>
Then expose aria-rowindex=”5″ on the element with id=”sd”