WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Table/Accordion Hybrid

for

From: Murphy, Sean
Date: Dec 16, 2019 3:19PM

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.