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 the multi-level column headers in this post. Let us understand what is multi-level column headers all about. Usually, we see the pattern like one single column header for all the data cells that are present in that particular column and basically it is called as simple data table. In case of complex table with multi-level column headers, each data cell with respect to the that particular column may have more than one single column header. To put it simpler, a column header would have sub column headers in the complex table with multi-level column headers. To understand which is main column header and which is sub column header visually, authors need to group the related column headers technically(like all the sub column headers need to be grouped with the corresponding main column header by merging the cells with the help of CSS paddings and HTML col 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 columns 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-colspan. Aria-colspan defines the number of columns spanned by a cell or gridcell. When aria-colspan is defined for the cells in the custom table, assistive technologies like screen reader are expected to understand how many columns are spanned and are expected to convey the same information to the users. The information about how many columns 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 column headers, it does not mean that spanning the columns is not limited to column headers. Author can span any columns by using aria-colspan attribute based on the requirement.
Author notes
- Author must use this attribute on the below roles only
- Cell
- Gridcell
- Column header
- Row header
- Authors MUST set the value of aria-colspan to an integer
- greater than or equal to 1
- less than value that prevents overlapping of other cells in the same row. In simple terms, if author wants to span 3 columns then the value of aria-colspan must be set to 3 only but not to 4 or 5 or so.
Notes for assistive technology venders
- Assistive technologies should not expose the value of aria-colspan 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
if given
<div role=”table”>
<div role=”row”>
<div id=”sd” role=”cell” aria-colspan=”2″>country</div>
</div>
</div>
then expose aria-colspan=”2″ on the element with id=”sd”
References