WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Tables with expandable panels

for

From: Sailesh Panchang
Date: Jul 9, 2015 10:26AM

Jonathan,
I would recommend your last option: Table with the panel in an overlay
Sailesh Panchang


On 7/9/15, _mallory < <EMAIL REMOVED> > wrote:
> 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>;
>>
>> >> >> >> > > > > >