As you may be aware of, making the simple tables accessible is much easier than making the complex tables accessible. In my view, there is no problem with the complex tables as long as they are accessible to the assistive technology users. Usually, complex tables would have multi-level column headers/row headers and it is one type of variety but there are many more verities within this complex tables. We are not going to discuss all the varieties of the complex table rather will discuss how one single row header becomes the row header for multiple rows in this post. Let us understand this in-details. Usually, we see the pattern like one single row header would be present for entire row and basically it is called as simple data table. In case of complex table, multiple rows/entries may have the sane row header like sidebar. To understand what are the different rows that have common row header, visually, authors need to group the related rows technically(like all the related rows need to be grouped with the corresponding row header by merging the cells with the help of CSS paddings and HTML row span techniques. When they do so, it is semantical to both sighted and assistive technology users that how many cells are spanned or so. Since the context that I have made so far is all about native data table, the semantical information is conveyed to the assistive technology users. However, the information about how many rows are spanned would not be conveyed to the assistive technology users if it is custom table as custom table is built with <div> and <span> tags and with other CSS properties and it is a problem.
In order to address this problem, aria1.1 introduced new brand attribute and it is aria-rowspan. Aria-rowspan defines the number of rows spanned by a cell or gridcell. When aria-rowspan is defined for the cells in the custom table, assistive technologies like screen reader are expected to understand how many rows are spanned and are expected to convey the same information to the users. The information about how many rows are spanned in the table enables the screen reader users to visualize the table structure very clearly than ever before. as I have explained this concept with the spanning of row headers, it does not mean that spanning the rows is not limited to row headers. Author can span any rows by using aria-rowspan attribute based on the requirement.
- Author must use this attribute on the below roles only
- Column header
- Row header
- Authors MUST set the value of aria-rowspan to an integer
- greater than or equal to 0
- less than value that prevents overlapping of other cells in the same column. In simple terms, if author wants to span 3 rows then the value of aria-rowspan must be set to 3 only but not to 4 or 5 or so.
- Aria-rowspan=”0” means the cell spans all the remaining rows in its row group.
Notes for assistive technology venders
- Assistive technologies should not expose the value of aria-rowspan for an element if equivalent host language attribute is provided rather assistive technologies should expose the value of the host language’s attribute.
Sample code snippet
<div id=”sd” role=”cell” aria-rowspan=”2″>test cell</div>
then expose aria-rowspan =”2″ on the element with id=”sd”