WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: David Farough
Date: May 30, 2023 12:11PM

That's a great poste.
One thing I noticed was that you could easily navigate to the disclosure button in the table by using the shift tab or screen reader navigation shortcuts .
I also noticed that Jaws was unable to navigate the table in Laurence's example perhaps due to the CSS property in the example.
Thanksfor that poste.

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of <EMAIL REMOVED>
Sent: Tuesday, May 30, 2023 12:46 PM
To: WebAIM Discussion list < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Expanding Table rows - Can this be made accessible?

Hmm, this is an interesting problem, not an impossible one but likely challenging. That said, Adrian Roselli has written a post <https://adrianroselli.com/2019/09/table-with-expando-rows.html> which, I think accomplishes the type of thing you're trying to accomplish.

Steve


> On May 29, 2023, at 5:29 PM, Laurence Lewis < <EMAIL REMOVED> > wrote:
>
> I have been asked to advise on the accessibility requirements for an
> expandable table row. When the row is clicked it expands to show X
> number of additional table rows.
>
>
> I am struggling to work out how to make something like this
> accessible. I thought of the disclosure show/hide pattern and the
> relevant ARIA and for screen reader users perhaps role-description to provide extra information.
>
>
> I built a couple of possible methods. Note these are simple POCs to
> find out whether this can be achieved accessibly.
>
>
> I'd appreciate feedback from A11y Subject Matter Experts (SMEs). Are
> there any accessible tables with this functionality existing, as I
> have not found any, and will either of these methods work? What
> changes can be implemented to make this more accessible? Is this an
> impossible task :-)
>
>
> Codepen POCs
>
> Expandable rows - non-button method (experimental)
> https://code/
> pen.io%2FDeafinitive%2Flive%2FqBJGmgR&data%7C01%7Cdavid.farough%40c
> fp-psc.gc.ca%7Ce66832e486024a2c750c08db612d540c%7C961b30aad4394bc7b674
> 9c4a389b0be3%7C0%7C0%7C638210619536379376%7CUnknown%7CTWFpbGZsb3d8eyJW
> IjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%
> 7C%7C%7C&sdata=Ku%2BpxjMq3gBWjcfwu0NJ%2FDTUr%2FvP%2BASU2l9WgQvcpZM%3D&
> reserved=0
>
> Expandable rows - button method (experimental)
>
> https://code/
> pen.io%2FDeafinitive%2Flive%2FMWPdmrd&data%7C01%7Cdavid.farough%40c
> fp-psc.gc.ca%7Ce66832e486024a2c750c08db612d540c%7C961b30aad4394bc7b674
> 9c4a389b0be3%7C0%7C0%7C638210619536379376%7CUnknown%7CTWFpbGZsb3d8eyJW
> IjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%
> 7C%7C%7C&sdata=d%2FPiNK2r4g9iBKnDhbSPQF1QOobX7z3ua8XZ%2BvUHXNo%3D&rese
> rved=0
>
>
>
> Laurence Lewis
>
> Accessibility Senior Specialist (Telstra, Brisbane Australia)
> > > http://list/.
> webaim.org%2F&data%7C01%7Cdavid.farough%40cfp-psc.gc.ca%7Ce66832e48
> 6024a2c750c08db612d540c%7C961b30aad4394bc7b6749c4a389b0be3%7C0%7C0%7C6
> 38210619536379376%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoi
> V2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdatatzmtjiWD
> 6Z%2FrTkdoLFfutUwvbbZ%2FB%2FtxqEhLZk2wsA%3D&reserved=0
> List archives at
> http://webai/
> m.org%2Fdiscussion%2Farchives&data%7C01%7Cdavid.farough%40cfp-psc.g
> c.ca%7Ce66832e486024a2c750c08db612d540c%7C961b30aad4394bc7b6749c4a389b
> 0be3%7C0%7C0%7C638210619536379376%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4w
> LjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C
> &sdata:6uujZ9FkjEyQ5LgDIDDhHn2ElQWwzHfvvIiGjyNYI%3D&reserved=0
>