WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Table/Accordion Hybrid

for

From: Birkir R. Gunnarsson
Date: Dec 17, 2019 2:37PM

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 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 REMOVED> > On Behalf Of Brian
> Lovely via WebAIM-Forum
> Sent: Tuesday, 17 December 2019 8:53 AM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Cc: Brian Lovely < <EMAIL 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.