Information structures: The grouped table
In this article we take a look at the grouped table. You may have seen examples of grouped table data in other applications such as Microsoft Outlook or the file explorer in your operating system. Some of you semantics freaks would argue that presenting data this way is not possible as a grouped table does not exist in html. We’ll see about that.
Sometimes we all stumble across data that we would like to display in a grouped fashion without having to repeat the table headers for each group. But how can this be accomplished in html while preserving accessibility? The tbody element is supposed to be used for grouping table rows but is not supported by JAWS. Let’s try two different approaches that are commonly found on websites we visit:
- The cell colspan - hidden column approach
- The list of tables approach
1. The cell colspan - hidden column approach
Some of you may already have grouped items by creating a table row with a single cell spanning all columns in the table and put a header in this cell. This works fine in JAWS and is easily formatted for screen presentation.
The unstyled html looks like this:
| Chosen side | Name | Age | Sex |
|---|---|---|---|
| Good guys | |||
| Leia | 32 | Female | |
| Luke | 25 | Male | |
| Bad guys | |||
| Darth | 50 | Male | |
| Jabba | Unknown | Unknown | |
Adding some style to it all gets us here:
| Chosen side | Name | Age | Sex |
|---|---|---|---|
| Group 1 of 2, Good guys: | |||
| Leia | 32 | Female | |
| Han | 35 | Male | |
| Luke | 25 | Male | |
| Group 2 of 2, Bad guys: | |||
| Darth | 50 | Male | |
| Jabba | Unknown | Unknown | |
| Moff | 40 | Male | |
What does it sound like? Let’s listen to JAWS. As you can hear, there are some issues with this approach:
- The number of rows reported by JAWS is incorrect as we use a row to display the group name.
- It is necessary to use the aural text class to provide information about which group the listener is at and how many groups are left. Otherwise it is hard to separate group information from table content. It is likely that you can automate this information from code.
2. The list of tables approach
In this approach we make use of the list elements. JAWS provides the listener with information about the number of elements before reading the list and the listener can move back and forth between list items. The unstyled html looks like this:
- Good guys
Name Age Sex Leia 32 Female Luke 25 Male - Bad Guys
Name Age Sex Darth 50 Male Jabba Unknown Unknown
The idea is to use the list item to provide the group information and then add a table with the items for each group. As you can see this looks a bit funny without styling as the headers are repeated over and over again for each group. Adding some style takes care of that:
- Good guys
Name Age Sex Leia 32 Female Luke 25 Male - Bad Guys
Name Age Sex Darth 50 Male Jabba Unknown Unknown
What does this approach sound like? Let’s listen to JAWS. This sounds pretty decent but as you heard there are some issues here as well:
- The table summary has to be short. It is likely that the user has received enough information about the group from listening to the list item text.
- It is necessary to use the aural text class to hide the column headings from viewing visitors.
- The size of table cell data may differ. This means that it may be hard to vertically align all cells properly as we are working with multiple tables.
Deciding which approach you should use depends on a number of factors. Will there be many groups? If so, it may be difficult to browse the groups in the cell colspan approach. The semantic information provided by JAWS make it easier to understand the group structure when we use the list of tables approach. Also, this approach makes it harder to display column header information for viewing visitors. Aligning columns vertically will also be a mess.
Did this article provide inspiration to experiment on your own? Please share your thoughts and ideas below.
Interesting article. This will be very helpful for a webapp we are developing right now.
I don’t know why you can’t just use headings; multiple tables with caption; or a definition list. Your example table seems too fictitious for us to really decide which is best, or at least which is least bad.
Joe, thank you for your comment. Using a definition list is not recommended. Jaws for example, reads definition lists as “Definition list of X items. [dt text] equals [dd text]“. This would make a grouped table confusing for a screen reader user.
Using multiple tables creates the same issues as approach #2: repeated column headers and possible problems with column alignment.
Using headings could be an alternative in approach #1 if one makes sure those headings exist in a proper heading context.
Thhis article is meant as a starting point for a discusssion around a good solution. I have seen many web applications where this is an issue.
the problem with approach #2 would be the navigability of the table with a screenreader like JAWS. splitting the table up into separate ones makes it that little bit more difficult to, say, just go down row by row while staying in a particular column.
not looked too hard at it, and don’t have JAWS here at home, but it appears to be a classic example of a complex, multi-dimensional table where headers should be identified via headers/id (and possibly axis), rather than scope. W3C HTML4.01 spec - Tables in HTML documents
Don’t rely on Jaws alone. It might be the most popular, but it isn’t necessarily that good. Furthermore, regardless of whether it is good or bad, other screen readers are quite different. It is hard to create HTML modified for screen reader optimization as that might impact your ideal semantics.
Your example suggests possibly the use of two <thead> tags.
Things like scope, and axis in theory will help users navigate the table much more easily, but that requires Jaws and others to get on board and support this stuff (I think Jaws has some limited support).
Interesting read. However, it is pretty well established at this point that Jabba is male, and since Luke and Leia are twins there seems to be some error in your table data for ‘age’. Although hyperspace travel presumably would create some weird temporal effects, I think that the one doing more space travel (Leia in this example) would age less, not more, that the other one, according to the theory of relativity.