WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Expanding Table rows - Can this be made accessible?

for

From: glen walker
Date: May 29, 2023 5:11PM

You mentioned the "disclosure show/hide pattern". Have you also looked at
the HTML <details>/<summary> element?

If your expanded rows were "sub rows" of the row they're expanded from,
then I could maybe see using a details/summary element, but your two
examples seem to add full rows to the table. I'm not seeing the connection
between the row that's clicked on and the newly added rows. I'm assuming
there's some kind of relationship?

The button example doesn't really have a relationship to the newly added
rows. It's just a random button in the middle of the table.

One of the challenging aspects is when you navigate to a table with a
screen reader, you're given information about the number of rows and
columns. When you expand a row, now there are more rows in the table. It
looks like you try to account for that with a description for the row.
(You're using aria-description, which I believe is ARIA 1.3 which isn't an
approved spec yet. In fact, I'm not sure ARIA 1.2 is approved yet since
it's a "Proposed Recommendation". However, I heard the description
announced by NVDA.)

I think both NVDA and JAWS let you "re-announce" an element (not sure what
the shortcut key is) so perhaps after the rows are added, if I hit that
shortcut key, I'd hear the new table dimensions. (I tried Ins+Numpad5 for
NVDA but it just said "cell" and not info about the table as a whole.)

I should be able to navigate off the table then back to it to hear the new
number of rows. You could potentially force the announcement of the new
table dimensions with aria-live.