WebAIM - Web Accessibility In Mind

E-mail List Archives

Table/Accordion Hybrid

for

From: Brian Lovely
Date: Dec 16, 2019 2:52PM

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.