WebAIM - Web Accessibility In Mind

E-mail List Archives

Tables with expandable panels

for

From: Jonathan Avila
Date: Jul 8, 2015 5:49PM

I wanted to get others thoughts on the best way to semantically markup tabular data that has expandable panels. Take the example of a store locator table that has say 5 columns of store details, city, state, zip, hours, etc. The table contains multiple rows of store locations. When a row is clicked or an expandable icon is activated in the first column an additional row appears below the expanded row with a map and additional store data. The expanded area appears sort of like a panel under an accordion and spans the entire row. The spanned content is not tabular data and only one expanded panel can appear at any time. I've been thinking about ways to markup this content but there doesn't appear to be any perfect solution for the situation.

The options I considered are:

* Accordion: Since this is tabular data using an accordion type structure really doesn't work and doesn't facilitate tabular navigation with assistive technology. Furthermore, breaking each row into it's own table or grid wouldn't really assist screen reader users in reading down through a column to locate a particular store.

* Data table with a spanned row: This solution would simply have a row spanning all columns in a data table. Since ARIA grids don't natively support spanned rows/columns HTML table markup would need to be used. Perhaps some sort of scope of rowgroup could be used on the expand and apply to the one row below.

* ARIA grid with data table markup: Basically the same as above but perhaps less desirable because the panel content would ideally be read with the virtual/browse mode cursor of a screen reader.

* ARIA tree grid: On first thought this seems like the best solution. However, the intention of a tree grid is to have items of different levels in the first column but still maintain tabular data in the other columns of the table. The expanded row would have an aria-level set to indicate it is a child node of the row above but the panel area would need to span all columns. But this really doesn't fit the description of a tree grid.

* Table with the panel in an overlay: All of the tabular data would be located in one table and when a panel is expanded by activating the expand button or clicking a row, an overlay that is not within the table structure would appear and be placed using CSS under the row with the other table rows being pushed downward using CSS padding or something similar. Focus would be moved to the panel area and a button in the panel area would return focus back to the button used to expand the panel. Something similar could be done with a modal although that requires the user to hide the modal in order to visually look at the other rows in the table.

Jonathan

--
Jonathan Avila
Chief Accessibility Officer
SSB BART Group
<EMAIL REMOVED> <mailto: <EMAIL REMOVED> >

703-637-8957 (o)
Follow us: Facebook<http://www.facebook.com/#%21/ssbbartgroup>; | Twitter<http://twitter.com/#%21/SSBBARTGroup>; | LinkedIn<http://www.linkedin.com/company/355266?trk=tyah>; | Blog<http://www.ssbbartgroup.com/blog>; | Newsletter<http://eepurl.com/O5DP>;