E-mail List Archives
Thread: Tables with expandable panels
Number of posts in this thread: 7 (In chronological order)
From: Jonathan Avila
Date: Wed, Jul 08 2015 5:49PM
Subject: Tables with expandable panels
No previous message | Next message →
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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS 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>;
From: _mallory
Date: Wed, Jul 08 2015 11:25PM
Subject: Re: Tables with expandable panels
← Previous message | Next message →
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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS 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>;
>
> > > >
From: Moore,Michael (HHSC)
Date: Thu, Jul 09 2015 7:30AM
Subject: Re: Tables with expandable panels
← Previous message | Next message →
Jonathan,
You may want to consider using a modal window to display the additional information since that information really does not fit into the existing table structure. NCSU has a good example of how to implement this in at the following url: http://accessibility.oit.ncsu.edu/training/aria/modal-window/version-3/
Mike Moore
Accessibility Coordinator
Texas Health and Human Services Commission
Civil Rights Office
(512) 438-3431 (Office)
(512) 574-0091 (Cell)
From: Jonathan Avila
Date: Thu, Jul 09 2015 10:13AM
Subject: Re: Tables with expandable panels
← Previous message | Next message →
> You may want to consider using a modal window to display the additional information since that information really does not fit into the existing table structure. NCSU has a good example of how to implement this in at the following url: http://accessibility.oit.ncsu.edu/training/aria/modal-window/version-3/
Thanks Mike. I did consider the modal in my last possibility but it changes the user experience as it covers up the table data which people may want to see or navigate through while the panel is open.
Jonathan
--
Jonathan Avila
Chief Accessibility Officer
SSB BART Group
= EMAIL ADDRESS REMOVED =
703-637-8957 (o)
Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter
From: Sailesh Panchang
Date: Thu, Jul 09 2015 10:26AM
Subject: Re: Tables with expandable panels
← Previous message | Next message →
Jonathan,
I would recommend your last option: Table with the panel in an overlay
Sailesh Panchang
On 7/9/15, _mallory < = EMAIL ADDRESS 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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS 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>;
>>
>> >> >> >> > > > > >
From: Moore,Michael (HHSC)
Date: Thu, Jul 09 2015 10:45AM
Subject: Re: Tables with expandable panels
← Previous message | Next message →
Probably time to build a couple of a/b test versions and run them through usability testing.
Mike Moore
Accessibility Coordinator
Texas Health and Human Services Commission
Civil Rights Office
(512) 438-3431 (Office)
(512) 574-0091 (Cell)
From: Graham Armfield
Date: Fri, Jul 10 2015 1:13AM
Subject: Re: Tables with expandable panels
← Previous message | No next message
Agree that the modal panel is probably the best way to go.
Re covering up other content, since we're using javascript anyway, you
could use a function to temporarily increase the height of the row whilst
the modal is being shown. That should push the following content down. Then
when the modal is closed you can remove the articial inflation.
This would be easy to accomplish if you're using a library like jquery, but
not too difficult if you're rolling your own javascript.
Regards
Graham Armfield
On 9 Jul 2015 17:45, "Moore,Michael (HHSC)" < = EMAIL ADDRESS REMOVED = >
wrote:
> Probably time to build a couple of a/b test versions and run them through
> usability testing.
>
> Mike Moore
> Accessibility Coordinator
> Texas Health and Human Services Commission
> Civil Rights Office
> (512) 438-3431 (Office)
> (512) 574-0091 (Cell)
>
>
>