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:

  1. The cell colspan – hidden column approach
  2. 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.

Comments are closed.