E-mail List Archives
Thread: Table Headers In Separate Table From Data
Number of posts in this thread: 6 (In chronological order)
From: KellyFord
Date: Wed, May 02 2018 10:46AM
Subject: Table Headers In Separate Table From Data
No previous message | Next message →
Hi,
Although it doesn't happen too often, over the past couple years I have
noticed an increase in web experiences where table column headers are put in
a separate table from the data. One of the financial sites I use, that used
to be a go to for easily demonstrating how proper table headers make reading
tabular data easy with a screen reader, has now incorporated this sort of
design.
I am curious if list subscribers have an idea why web developers use a
design that puts the column headers of a table in a separate table. What
benefits does this achieve, independent of accessibility concerns, that have
caused this to start happening?
Again this is not entirely recent but several years ago I'd say I never
encountered this. Now the times I encounter it is certainly greater than 0.
Kelly
From: Jonathan Avila
Date: Wed, May 02 2018 11:00AM
Subject: Re: Table Headers In Separate Table From Data
← Previous message | Next message →
> I am curious if list subscribers have an idea why web developers use a design that puts the column headers of a table in a separate table. What benefits does this achieve, independent of accessibility concerns, that have caused this to start happening?
People do this so that the table body can scroll and the header can be fixed.
Jonathan
Jonathan Avila
Chief Accessibility Officer
Level Access
= EMAIL ADDRESS REMOVED =
703.637.8957 office
Visit us online:
Website | Twitter | Facebook | LinkedIn | Blog
Looking to boost your accessibility knowledge? Check out our free webinars!
The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of KellyFord
Sent: Wednesday, May 02, 2018 12:47 PM
To: 'WebAIM Discussion List'
Subject: [WebAIM] Table Headers In Separate Table From Data
Hi,
Although it doesn't happen too often, over the past couple years I have
noticed an increase in web experiences where table column headers are put in
a separate table from the data. One of the financial sites I use, that used
to be a go to for easily demonstrating how proper table headers make reading
tabular data easy with a screen reader, has now incorporated this sort of
design.
I am curious if list subscribers have an idea why web developers use a
design that puts the column headers of a table in a separate table. What
benefits does this achieve, independent of accessibility concerns, that have
caused this to start happening?
Again this is not entirely recent but several years ago I'd say I never
encountered this. Now the times I encounter it is certainly greater than 0.
Kelly
From: Jonathan Cohn
Date: Wed, May 02 2018 11:32AM
Subject: Re: Table Headers In Separate Table From Data
← Previous message | Next message →
Yes, we have several of these tables on our administration site, and are currently working on making them appear as one table. Unfortunately it isn't only the fact that the two tables need to be pseudo-merged, we also have a checkbox to select the row and a button to edit data on a row in the first column, and need to make sure items are labeled appropriately. Our plan right now is to have the table with only headers be marked with aria-hidden, and then to have the second table have column headers that are being masked visually by the first table but that will be available to the screen reader.
I have also fooled around with using aria-owns and role=presentation, but have had not been able to consistently have this provide a good rendering in all systems.
Jonathan Cohn
> On May 2, 2018, at 1:00 PM, Jonathan Avila < = EMAIL ADDRESS REMOVED = > wrote:
>
>> I am curious if list subscribers have an idea why web developers use a design that puts the column headers of a table in a separate table. What benefits does this achieve, independent of accessibility concerns, that have caused this to start happening?
>
> People do this so that the table body can scroll and the header can be fixed.
>
> Jonathan
>
> Jonathan Avila
> Chief Accessibility Officer
> Level Access
> = EMAIL ADDRESS REMOVED =
> 703.637.8957 office
>
> Visit us online:
> Website | Twitter | Facebook | LinkedIn | Blog
>
> Looking to boost your accessibility knowledge? Check out our free webinars!
>
> The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of KellyFord
> Sent: Wednesday, May 02, 2018 12:47 PM
> To: 'WebAIM Discussion List'
> Subject: [WebAIM] Table Headers In Separate Table From Data
>
> Hi,
>
>
>
> Although it doesn't happen too often, over the past couple years I have
> noticed an increase in web experiences where table column headers are put in
> a separate table from the data. One of the financial sites I use, that used
> to be a go to for easily demonstrating how proper table headers make reading
> tabular data easy with a screen reader, has now incorporated this sort of
> design.
>
>
>
> I am curious if list subscribers have an idea why web developers use a
> design that puts the column headers of a table in a separate table. What
> benefits does this achieve, independent of accessibility concerns, that have
> caused this to start happening?
>
>
>
> Again this is not entirely recent but several years ago I'd say I never
> encountered this. Now the times I encounter it is certainly greater than 0.
>
>
>
> Kelly
>
> > > > > > > >
From: Lamond, Keith
Date: Wed, May 02 2018 12:02PM
Subject: Re: Table Headers In Separate Table From Data
← Previous message | Next message →
There are examples of using the ARIA Grid role to make t a table designed as two tables, with one table being the column headings and the other containing the data appear as one table to screen readers. We used the ARIA grid role to successfully remediate tables that were designed this way.
Keith lamond
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jonathan Cohn
Sent: Wednesday, May 2, 2018 1:32 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Table Headers In Separate Table From Data
[External Email]
----------------------------------------------------------------------
Yes, we have several of these tables on our administration site, and are currently working on making them appear as one table. Unfortunately it isn't only the fact that the two tables need to be pseudo-merged, we also have a checkbox to select the row and a button to edit data on a row in the first column, and need to make sure items are labeled appropriately. Our plan right now is to have the table with only headers be marked with aria-hidden, and then to have the second table have column headers that are being masked visually by the first table but that will be available to the screen reader.
I have also fooled around with using aria-owns and role=presentation, but have had not been able to consistently have this provide a good rendering in all systems.
Jonathan Cohn
> On May 2, 2018, at 1:00 PM, Jonathan Avila < = EMAIL ADDRESS REMOVED = > wrote:
>
>> I am curious if list subscribers have an idea why web developers use a design that puts the column headers of a table in a separate table. What benefits does this achieve, independent of accessibility concerns, that have caused this to start happening?
>
> People do this so that the table body can scroll and the header can be fixed.
>
> Jonathan
>
> Jonathan Avila
> Chief Accessibility Officer
> Level Access
> = EMAIL ADDRESS REMOVED =
> 703.637.8957 office
>
> Visit us online:
> Website | Twitter | Facebook | LinkedIn | Blog
>
> Looking to boost your accessibility knowledge? Check out our free webinars!
>
> The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of KellyFord
> Sent: Wednesday, May 02, 2018 12:47 PM
> To: 'WebAIM Discussion List'
> Subject: [WebAIM] Table Headers In Separate Table From Data
>
> Hi,
>
>
>
> Although it doesn't happen too often, over the past couple years I
> have noticed an increase in web experiences where table column headers
> are put in a separate table from the data. One of the financial sites
> I use, that used to be a go to for easily demonstrating how proper
> table headers make reading tabular data easy with a screen reader, has
> now incorporated this sort of design.
>
>
>
> I am curious if list subscribers have an idea why web developers use a
> design that puts the column headers of a table in a separate table.
> What benefits does this achieve, independent of accessibility
> concerns, that have caused this to start happening?
>
>
>
> Again this is not entirely recent but several years ago I'd say I
> never encountered this. Now the times I encounter it is certainly greater than 0.
>
>
>
> Kelly
>
> > > https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_&d
> =DwIGaQ&cÿ2GokX4A_6S-cy_JRNEiQ&r=7QG6ffChijbDKx3bYL1y37tYFb4ByB2DeBg
> ALZ5VET8&m=wltKRy7WLwZydAnnXLwlHWFwXUj42oEIw9uaupMk7LA&s=kD0aKH82MVDn6
> Iz5ZCDDrGZQK9tJpd0pI0Tce5igSHA&e= List archives at
> https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_discuss
> ion_archives&d=DwIGaQ&cÿ2GokX4A_6S-cy_JRNEiQ&r=7QG6ffChijbDKx3bYL1y3
> 7tYFb4ByB2DeBgALZ5VET8&m=wltKRy7WLwZydAnnXLwlHWFwXUj42oEIw9uaupMk7LA&s
> =NsfMtE-TjDjNSbsI2XgbzBYcQcS5UJMxpJriy1tTieM&e> > > > https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_&d
> =DwIGaQ&cÿ2GokX4A_6S-cy_JRNEiQ&r=7QG6ffChijbDKx3bYL1y37tYFb4ByB2DeBg
> ALZ5VET8&m=wltKRy7WLwZydAnnXLwlHWFwXUj42oEIw9uaupMk7LA&s=kD0aKH82MVDn6
> Iz5ZCDDrGZQK9tJpd0pI0Tce5igSHA&e= List archives at
> https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_discuss
> ion_archives&d=DwIGaQ&cÿ2GokX4A_6S-cy_JRNEiQ&r=7QG6ffChijbDKx3bYL1y3
> 7tYFb4ByB2DeBgALZ5VET8&m=wltKRy7WLwZydAnnXLwlHWFwXUj42oEIw9uaupMk7LA&s
> =NsfMtE-TjDjNSbsI2XgbzBYcQcS5UJMxpJriy1tTieM&e> The preceding message (including attachments) is covered by the Electronic Communication Privacy Act, 18 U.S.C. sections 2510-2512, is intended only for the person or entity to which it is addressed, and may contain information that is confidential, protected by attorney-client or other privilege, or otherwise protected from disclosure by law. If you are not the intended recipient, you are hereby notified that any retention, dissemination, distribution, or copying of this communication is strictly prohibited. Please reply to the sender that you have received the message in error and destroy the original message and all copies.
From: Sailesh Panchang
Date: Wed, May 02 2018 12:04PM
Subject: Re: Table Headers In Separate Table From Data
← Previous message | Next message →
Here is a solution that seems to work quite alright and I have pointed
developers to this in the past:
http://juicystudio.com/article/accessible_data_tables_static_headers.php
Thanks,
--
Sailesh Panchang
Principal Accessibility Consultant
Deque Systems Inc
Phone 703-225-0380 ext 105
Mobile: 571-344-1765
On 5/2/18, Jonathan Cohn < = EMAIL ADDRESS REMOVED = > wrote:
> Yes, we have several of these tables on our administration site, and are
> currently working on making them appear as one table. Unfortunately it isn't
> only the fact that the two tables need to be pseudo-merged, we also have a
> checkbox to select the row and a button to edit data on a row in the first
> column, and need to make sure items are labeled appropriately. Our plan
> right now is to have the table with only headers be marked with aria-hidden,
> and then to have the second table have column headers that are being masked
> visually by the first table but that will be available to the screen reader.
>
> I have also fooled around with using aria-owns and role=presentation, but
> have had not been able to consistently have this provide a good rendering in
> all systems.
>
> Jonathan Cohn
>> On May 2, 2018, at 1:00 PM, Jonathan Avila < = EMAIL ADDRESS REMOVED = >
>> wrote:
>>
>>> I am curious if list subscribers have an idea why web developers use a
>>> design that puts the column headers of a table in a separate table. What
>>> benefits does this achieve, independent of accessibility concerns, that
>>> have caused this to start happening?
>>
>> People do this so that the table body can scroll and the header can be
>> fixed.
>>
>> Jonathan
>>
>> Jonathan Avila
>> Chief Accessibility Officer
>> Level Access
>> = EMAIL ADDRESS REMOVED =
>> 703.637.8957 office
>>
>> Visit us online:
>> Website | Twitter | Facebook | LinkedIn | Blog
>>
>> Looking to boost your accessibility knowledge? Check out our free
>> webinars!
>>
>> The information contained in this transmission may be attorney privileged
>> and/or confidential information intended for the use of the individual or
>> entity named above. If the reader of this message is not the intended
>> recipient, you are hereby notified that any use, dissemination,
>> distribution or copying of this communication is strictly prohibited.
>>
>>
>> -----Original Message-----
>> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf
>> Of KellyFord
>> Sent: Wednesday, May 02, 2018 12:47 PM
>> To: 'WebAIM Discussion List'
>> Subject: [WebAIM] Table Headers In Separate Table From Data
>>
>> Hi,
>>
>>
>>
>> Although it doesn't happen too often, over the past couple years I have
>> noticed an increase in web experiences where table column headers are put
>> in
>> a separate table from the data. One of the financial sites I use, that
>> used
>> to be a go to for easily demonstrating how proper table headers make
>> reading
>> tabular data easy with a screen reader, has now incorporated this sort of
>> design.
>>
>>
>>
>> I am curious if list subscribers have an idea why web developers use a
>> design that puts the column headers of a table in a separate table. What
>> benefits does this achieve, independent of accessibility concerns, that
>> have
>> caused this to start happening?
>>
>>
>>
>> Again this is not entirely recent but several years ago I'd say I never
>> encountered this. Now the times I encounter it is certainly greater than
>> 0.
>>
>>
>>
>> Kelly
>>
>> >> >> >> >> >> >> >> >
> > > > >
From: Mallory
Date: Thu, May 03 2018 1:51AM
Subject: Re: Table Headers In Separate Table From Data
← Previous message | No next message
When I've done the two-tables thing, IF I don't need the headers clickable for sorting or select-column or whatnot, then I make the visible table-with-only headers the aria-hidden one. Screen reader users then at least get 1 full single table, and the headers on it are simply covered up by the aria-hidden table showing headers.
Where I have trouble is when I need click events and key listeners on those headers.
cheers,
_mallory
On Wed, May 2, 2018, at 8:04 PM, Sailesh Panchang wrote:
> Here is a solution that seems to work quite alright and I have pointed
> developers to this in the past:
> http://juicystudio.com/article/accessible_data_tables_static_headers.php
> Thanks,
> --
> Sailesh Panchang
> Principal Accessibility Consultant
> Deque Systems Inc
> Phone 703-225-0380 ext 105
> Mobile: 571-344-1765
>
>
> On 5/2/18, Jonathan Cohn < = EMAIL ADDRESS REMOVED = > wrote:
> > Yes, we have several of these tables on our administration site, and are
> > currently working on making them appear as one table. Unfortunately it isn't
> > only the fact that the two tables need to be pseudo-merged, we also have a
> > checkbox to select the row and a button to edit data on a row in the first
> > column, and need to make sure items are labeled appropriately. Our plan
> > right now is to have the table with only headers be marked with aria-hidden,
> > and then to have the second table have column headers that are being masked
> > visually by the first table but that will be available to the screen reader.
> >
> > I have also fooled around with using aria-owns and role=presentation, but
> > have had not been able to consistently have this provide a good rendering in
> > all systems.
> >
> > Jonathan Cohn
> >> On May 2, 2018, at 1:00 PM, Jonathan Avila < = EMAIL ADDRESS REMOVED = >
> >> wrote:
> >>
> >>> I am curious if list subscribers have an idea why web developers use a
> >>> design that puts the column headers of a table in a separate table. What
> >>> benefits does this achieve, independent of accessibility concerns, that
> >>> have caused this to start happening?
> >>
> >> People do this so that the table body can scroll and the header can be
> >> fixed.
> >>
> >> Jonathan
> >>
> >> Jonathan Avila
> >> Chief Accessibility Officer
> >> Level Access
> >> = EMAIL ADDRESS REMOVED =
> >> 703.637.8957 office
> >>
> >> Visit us online:
> >> Website | Twitter | Facebook | LinkedIn | Blog
> >>
> >> Looking to boost your accessibility knowledge? Check out our free
> >> webinars!
> >>
> >> The information contained in this transmission may be attorney privileged
> >> and/or confidential information intended for the use of the individual or
> >> entity named above. If the reader of this message is not the intended
> >> recipient, you are hereby notified that any use, dissemination,
> >> distribution or copying of this communication is strictly prohibited.
> >>
> >>
> >> -----Original Message-----
> >> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf
> >> Of KellyFord
> >> Sent: Wednesday, May 02, 2018 12:47 PM
> >> To: 'WebAIM Discussion List'
> >> Subject: [WebAIM] Table Headers In Separate Table From Data
> >>
> >> Hi,
> >>
> >>
> >>
> >> Although it doesn't happen too often, over the past couple years I have
> >> noticed an increase in web experiences where table column headers are put
> >> in
> >> a separate table from the data. One of the financial sites I use, that
> >> used
> >> to be a go to for easily demonstrating how proper table headers make
> >> reading
> >> tabular data easy with a screen reader, has now incorporated this sort of
> >> design.
> >>
> >>
> >>
> >> I am curious if list subscribers have an idea why web developers use a
> >> design that puts the column headers of a table in a separate table. What
> >> benefits does this achieve, independent of accessibility concerns, that
> >> have
> >> caused this to start happening?
> >>
> >>
> >>
> >> Again this is not entirely recent but several years ago I'd say I never
> >> encountered this. Now the times I encounter it is certainly greater than
> >> 0.
> >>
> >>
> >>
> >> Kelly
> >>
> >> > >> > >> > >> > >> > >> > >> > >> > >
> > > > > > > > > >
> > > >