E-mail List Archives
Thread: Non-Tabular in Table
Number of posts in this thread: 6 (In chronological order)
From: Brian Lovely
Date: Thu, May 16 2019 6:03AM
Subject: Non-Tabular in Table
No previous message | Next message →
I've been fighting against this pattern which is a hybrid of table and
accordion. Essentially, each table row displays a minimum amount of data
(all correct, columns, rows, and headers) but there is a button for "more".
When the button is activated a sort of accordion drawer opens that runs the
width of the table, completely breaking the column, row, header pattern.
This component would take some work to rebuild. My thought is to either
provide the cells with expandable areas and assign the "more" content to
specific cells which then open when the button is activated, or to display
the expanded version of the row data in a modal when the button is
activated. One drawback to the modal idea is that only one row can be
expanded at a time this way.
Before I really push for this change, I want to know if this hybrid
table/accordion is really as bad as I think it is. Should I keep pushing
for it to be changed or should I just pick another battle?
*Brian Lovely*
Capital One Digital Accessibility
804.389.1064
The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.
From: Patrick H. Lauke
Date: Thu, May 16 2019 1:41PM
Subject: Re: Non-Tabular in Table
← Previous message | Next message →
On 16/05/2019 13:03, Brian Lovely via WebAIM-Forum wrote:
> I've been fighting against this pattern which is a hybrid of table and
> accordion. Essentially, each table row displays a minimum amount of data
> (all correct, columns, rows, and headers) but there is a button for "more".
> When the button is activated a sort of accordion drawer opens that runs the
> width of the table, completely breaking the column, row, header pattern.
>
> This component would take some work to rebuild. My thought is to either
> provide the cells with expandable areas and assign the "more" content to
> specific cells which then open when the button is activated, or to display
> the expanded version of the row data in a modal when the button is
> activated. One drawback to the modal idea is that only one row can be
> expanded at a time this way.
>
> Before I really push for this change, I want to know if this hybrid
> table/accordion is really as bad as I think it is. Should I keep pushing
> for it to be changed or should I just pick another battle?
Conceptually, this sounds like a "treegrid". I'd suggest following the
suggested pattern/functionality described in
https://www.w3.org/TR/wai-aria-practices-1.1/#treegrid
P
--
Patrick H. Lauke
www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke
From: Brian Lovely
Date: Thu, May 16 2019 1:53PM
Subject: Re: [External Sender] Non-Tabular in Table
← Previous message | Next message →
>>>>>Patrick said Conceptually, this sounds like a "treegrid".
This would be an even harder sell than I have now, I think. Can a treegrid
be styled to resemble a table?
*Brian Lovely*
Capital One Digital Accessibility
804.389.1064
The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.
From: Brian Lovely
Date: Thu, May 16 2019 1:56PM
Subject: Re: [External Sender] Non-Tabular in Table
← Previous message | Next message →
...shoulda checked your link first. They do look like tables, but I don't
see anything with an accordion drawer. They're not adding a column, they're
added non-columnar data to a row. Is there a treegrid example that
resembles that?
On Thu, May 16, 2019 at 3:53 PM Brian Lovely < = EMAIL ADDRESS REMOVED = >
wrote:
> >>>>>Patrick said Conceptually, this sounds like a "treegrid".
>
>
> This would be an even harder sell than I have now, I think. Can a treegrid
> be styled to resemble a table?
>
> *Brian Lovely*
> Capital One Digital Accessibility
> 804.389.1064
>
--
*Brian Lovely*
Capital One Digital Accessibility
804.389.1064
The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.
From: Patrick H. Lauke
Date: Thu, May 16 2019 2:05PM
Subject: Re: [External Sender]Non-Tabular in Table
← Previous message | Next message →
On 16/05/2019 20:56, Brian Lovely via WebAIM-Forum wrote:
> ...shoulda checked your link first. They do look like tables, but I don't
> see anything with an accordion drawer. They're not adding a column, they're
> added non-columnar data to a row. Is there a treegrid example that
> resembles that?
Ah, I may have misunderstood your particular situation there with what
is revealed. Treegrid is more for exposing further sub-rows a la
https://www.w3.org/TR/wai-aria-practices-1.1/examples/treegrid/treegrid-1.html
Your case sounds like it could be made to use the pattern, but only if
the newly revealed row is then assigned a specific header (like making
the full thing a complex table with explicit headers assigned to each
cell, rather than pure row/column headers). Not a very clean pattern
though, so yeah wondering myself now if there's any good example that is
also deemed to be understandable/work well for AT users.
P
--
Patrick H. Lauke
www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke
From: Brian Lovely
Date: Thu, May 16 2019 2:24PM
Subject: Re: [External Sender]Non-Tabular in Table
← Previous message | No next message
Yeah, my point of view is that the thing is an unsemantic Frankenstein of
table and accordion. Unfortunately, there are some other issues, such as
the fact that they don't have child elements as immediate children of
parents. Everything in wrapped in a div or span. For instance, a div is the
child of the table, then a row is a child of the div. So the whole thing
won't read out correctly in NVDA no matter what. However, the extra
table-width information seems so un-tabular that I think it's part of the
problem.
The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.