WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Table/Accordion Hybrid

for

Number of posts in this thread: 3 (In chronological order)

From: Brian Lovely
Date: Mon, Dec 16 2019 2:52PM
Subject: Table/Accordion Hybrid
No previous message | Next message →

I am dealing with a pattern where a table has a sort of accordion-like
"drawer". The idea is that one row is the minimum information about a
thing, and the expanded row is the full details. This has been just in a
div that was stuck in between two rows, but using NVDA/Firefox and standard
keyboard shortcuts for table skipped this div entirely. I'm assuming
because it's not considered a child of the table in the accessibility tree.

The best solution anyone has been able to come up with so far is to add a
cell to the row, like this:

<table>
<row><th>pork</th><th>beans</th><th>toast</th></row>
<row><td>fatback</td><td>navy</td><td>white bread</td><td>The pork and
beans are cooked together and poured over the toast</td></row>
</table>

Note that there is no colspan on any other un-expanded rows, nor is there a
heading to correspond with the "expanded" cell. CSS is used to make the
extra cell look like another row beneath the parent row.

In VoiceOver/Safari and JAWS/Edge I can navigate to the expanded content
(using the appropriate keyboard shortcuts for table), but in
NVDA/Firefox/Chrome it is skipped over.

I know that this table/accordion hybrid is not ideal, but I'm trying to
figure out a way to make this work.

Is the NVDA failure to navigate the extra cell an NVDA bug?

--
*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: Murphy, Sean
Date: Mon, Dec 16 2019 3:19PM
Subject: Re: Table/Accordion Hybrid
← Previous message | Next message →

Brian,

Does Jaws work in Firefox and chrome? If so, then I would chalk it up as an NVDA bug.

Sean

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Brian Lovely via WebAIM-Forum
Sent: Tuesday, 17 December 2019 8:53 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Cc: Brian Lovely < = EMAIL ADDRESS REMOVED = >
Subject: [WebAIM] Table/Accordion Hybrid

[External Email] This email was sent from outside the organisation – be cautious, particularly with links and attachments.

I am dealing with a pattern where a table has a sort of accordion-like "drawer". The idea is that one row is the minimum information about a thing, and the expanded row is the full details. This has been just in a div that was stuck in between two rows, but using NVDA/Firefox and standard keyboard shortcuts for table skipped this div entirely. I'm assuming because it's not considered a child of the table in the accessibility tree.

The best solution anyone has been able to come up with so far is to add a cell to the row, like this:

<table>
<row><th>pork</th><th>beans</th><th>toast</th></row>
<row><td>fatback</td><td>navy</td><td>white bread</td><td>The pork and beans are cooked together and poured over the toast</td></row> </table>

Note that there is no colspan on any other un-expanded rows, nor is there a heading to correspond with the "expanded" cell. CSS is used to make the extra cell look like another row beneath the parent row.

In VoiceOver/Safari and JAWS/Edge I can navigate to the expanded content (using the appropriate keyboard shortcuts for table), but in NVDA/Firefox/Chrome it is skipped over.

I know that this table/accordion hybrid is not ideal, but I'm trying to figure out a way to make this work.

Is the NVDA failure to navigate the extra cell an NVDA bug?

--
*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: Birkir R. Gunnarsson
Date: Tue, Dec 17 2019 2:37PM
Subject: Re: Table/Accordion Hybrid
← Previous message | No next message

The way I've recommended doing it is to insert the info into a <td>
cell spanning the width of the table.
Put a div inside that row with role="group" and aria-label or
aria-labelledby pointing to the row header for the main row.
Ultimately it really isn't good to squeeze info like this into a table
but if the deisng can't be helped this is one way to minimize the
confusion.

On 12/16/19, Murphy, Sean < = EMAIL ADDRESS REMOVED = > wrote:
> Brian,
>
> Does Jaws work in Firefox and chrome? If so, then I would chalk it up as an
> NVDA bug.
>
> Sean
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Brian
> Lovely via WebAIM-Forum
> Sent: Tuesday, 17 December 2019 8:53 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Cc: Brian Lovely < = EMAIL ADDRESS REMOVED = >
> Subject: [WebAIM] Table/Accordion Hybrid
>
> [External Email] This email was sent from outside the organisation – be
> cautious, particularly with links and attachments.
>
> I am dealing with a pattern where a table has a sort of accordion-like
> "drawer". The idea is that one row is the minimum information about a thing,
> and the expanded row is the full details. This has been just in a div that
> was stuck in between two rows, but using NVDA/Firefox and standard keyboard
> shortcuts for table skipped this div entirely. I'm assuming because it's not
> considered a child of the table in the accessibility tree.
>
> The best solution anyone has been able to come up with so far is to add a
> cell to the row, like this:
>
> <table>
> <row><th>pork</th><th>beans</th><th>toast</th></row>
> <row><td>fatback</td><td>navy</td><td>white bread</td><td>The pork and beans
> are cooked together and poured over the toast</td></row> </table>
>
> Note that there is no colspan on any other un-expanded rows, nor is there a
> heading to correspond with the "expanded" cell. CSS is used to make the
> extra cell look like another row beneath the parent row.
>
> In VoiceOver/Safari and JAWS/Edge I can navigate to the expanded content
> (using the appropriate keyboard shortcuts for table), but in
> NVDA/Firefox/Chrome it is skipped over.
>
> I know that this table/accordion hybrid is not ideal, but I'm trying to
> figure out a way to make this work.
>
> Is the NVDA failure to navigate the extra cell an NVDA bug?
>
> --
> *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.
>
>
>
> > > http://webaim.org/discussion/archives
> > > > > >


--
Work hard. Have fun. Make history.