How to make expanding table rows accessible?

[theZieger]

Hi @HugoGiraudel,

since I'm quite new to making web applications accessible, and just started out to do so, I wondered if there is a way to make expandable rows inside of a table accessible to everyone. The problem is that the current design, of a new (internal company usage only) application I build, uses this pattern inside a table and I have no clue how to make it accessible. And even though I'm not required to make it a11y I would love to make it as inclusive as possible. The content of the expandable row may contain other tables with data, text and dialogs - so nearly anything. For tables and dialogs I already use accessible components (react-a11y-dialog :+1: and Heydons data-table).

Demo of something similar to my problem: http://talkerscode.com/webtricks/demo/demo_expand-table-rows-using-jquery-html-and-css.php

Hope that's not a too bold move of mine to ask for your help.

Best regards

Eric

[theZieger]

And just to clarify this I'm not asking for a really detailed explenation about how to solve this particular problem. But maybe you can point me into the right direction or specification.

[KittyGiraudel]

Hello Eric!

First, thank you for caring about making user interfaces accessible. I’m going to level up with you here and admit that I have no idea how to do that properly. I mean, my wild guess would be to combine an accessible table pattern like you do with a collapsible area like a11y-toggle but I don’t know how it would work with screen readers.

Maybe @heydon has a better idea than me on how to do this and care to join the conversation?

[theZieger]

Whoops, seems like I missed to add the example where I already implemented something similiar to a11y-toggle. Since it also was the only idea I had.

Maybe you could point me to a popular Screenreader for Linux? Then I could test it. At the moment I tested my application a bit with the ChromeVox Browser Extension since it was the easiest to use/setup but would love to test it with the "real deal" people would actually use on Linux which is the only platform available to me at work besides my private Android phone.

When I get back to work in 2 days I could also setup a codepen to give a insight at how I tackle the problem at the moment. So we could maybe work on this together if you and maybe @Heydon are interested.

If it turns out that this is a no-go pattern for a11y I may do it in another way.

But first thanks for your kind reply. 😊

[theZieger]

Here a demo using a11y-toggle: https://codepen.io/theZieger/pen/KRmqLo

[Heydon]

@HugoGiraudel @theZieger Hi both of you! I had a look. My first observation was that the information in the expanded row is the same information in the columns of the row above, just in sentence form. It is, therefore, redundant.

I'm not sure if this is the content intended for the final thing or just dummy content. But in inclusive design, you should always avoid any kind of interaction that is unnecessary, especially if it's complex or non-standard.

[theZieger]

@Heydon thanks for taking a look.

The codepen is just a demo and does not feature the real thing I am building since the data would be customer based and therefore is confidential. What I can say is that the table itself will hold data related to orders and the expandable row will mostly hold data to services inlcuded in the order.

The expended row will in my case feature more detailed information related to the row above. This includes other tables, a form, dialogs, links to other applications and text. ALl of this information will only be fetched from an API when the user intends to open the expandable row. And including all of the information inside the table would be ... lets say overwhelming and also heavy to load in one go. So I guess avoiding that interaction at all will be hard.

[theZieger]

@Heydon and to take this even further the detailed information in that expandable row (single services a customer booked) have an even more detailed view which is currently designed to open in a dialog from within the expanded row. :open_mouth: :roll_eyes:

And hell yes I know this sounds cluttered and I have to say it is.

But the question I have is: could I stick to a11y-toggle here and would it make sense in the way it is implemented - even if it's not as inclusive as it could be?

[mixalistzikas]

Hello, did you find something else or the a11y-toggle is the best solution?

[theZieger]

I finally went with the a11y-toggle pattern. But I would encourage to not implement expanding rows at all. I would try to implement separate pages to link to. If your requirements are not negotiable, go with a11y-toggle and test it thoroughly with assistive tech.

[mixalistzikas]

I'm trying to prevent it to the new layout, but I want to know all the alternatives.

Another alternative I can think of is opening on modal/drawer

[theZieger]

Looking for alternatives is always a good thing. 👍

Modals and drawers come with their own challenges I guess, but could work out. Personally I'd rather use the a11y toggle approach than a modal but if you do so take a look at https://github.com/KittyGiraudel/a11y-dialog.

Also a personal approach to modals I really like is that you can also implement the modal as a separate page so that on opening from the table you show the modal on top of the content/table and change the current url shallowly so that when the url is shared it opens as a separate page. Which could link back to the page with the table. I like this pattern a lot.