WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Tables with expandable panels

for

From: _mallory
Date: Jul 8, 2015 11:25PM

I'm curious to know what others think on this as well: we have
something a bit similar in our e-commerce tables, except they
no longer expand (now just always there). The other developer
made a nested table inside the row with a single tr and single
td spanning across with givaways/bundles/discount info that
sometimes comes with that product. I've been stumped.

_mallory

On Wed, Jul 08, 2015 at 11:49:08PM +0000, Jonathan Avila wrote:
> 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>;
>
> > > >