E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 7 (In chronological order)

From: Laurence Lewis
Date: Mon, May 29 2023 4:29PM
Subject: Expanding Table rows - Can this be made accessible?
No previous message | Next message →

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://codepen.io/Deafinitive/live/qBJGmgR

Expandable rows - button method (experimental)

https://codepen.io/Deafinitive/live/MWPdmrd



Laurence Lewis

Accessibility Senior Specialist (Telstra, Brisbane Australia)

From: glen walker
Date: Mon, May 29 2023 5:11PM
Subject: Re: Expanding Table rows - Can this be made accessible?
← Previous message | Next message →

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.

From: steve@sawczyn.com
Date: Tue, May 30 2023 10:45AM
Subject: Re: Expanding Table rows - Can this be made accessible?
← Previous message | Next message →

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 ADDRESS 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://codepen.io/Deafinitive/live/qBJGmgR
>
> Expandable rows - button method (experimental)
>
> https://codepen.io/Deafinitive/live/MWPdmrd
>
>
>
> Laurence Lewis
>
> Accessibility Senior Specialist (Telstra, Brisbane Australia)
> > > >

From: David Farough
Date: Tue, May 30 2023 12:11PM
Subject: Re: Expanding Table rows - Can this be made accessible?
← Previous message | Next message →

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 ADDRESS REMOVED = > On Behalf Of = EMAIL ADDRESS REMOVED =
Sent: Tuesday, May 30, 2023 12:46 PM
To: WebAIM Discussion list < = EMAIL ADDRESS 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 ADDRESS 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
>

From: Laurence Lewis
Date: Tue, May 30 2023 1:32PM
Subject: Re: Expanding Table rows - Can this be made accessible?
← Previous message | Next message →

Glen, You make some interesting observations to consider. The tables I
provided as examples were dummy content, it was the expanding functionality
I was targeting rather than the relationship between the parent row and the
expanded rows. The aria-description is not part of the ARIA specification,
however it is already supported by both browsers and screen readers.
Someone in the ARIA WG could probably add more information on why this has
such wide support. It was Bryan Garaventa who originally introduced me to
aria-description.

The support for the Summary / Details HTML pattern does suggest it is now a
viable option.

Steve, thanks for the Adrian link. I noticed his approach is reasonable
similar to my POCs in that he uses a disclosure widget with aria-expanded
and aria-controls.

I have something I can work with now, thank you both for your feedback.

Laurence Lewis
Accessibility Senior Specialist (Telstra, Brisbane Australia)

From: Birkir R. Gunnarsson
Date: Sun, Jun 04 2023 12:01PM
Subject: Re: Expanding Table rows - Can this be made accessible?
← Previous message | Next message →

Yeap, we've been implementing similar table patterns in my web
development area recently.
Insert the extra info in the next row in the table (a cell that spans
the whole row).

Inside that cell place another element with role="group" and
aria-label="info for x" (where x is a reference to the row header or
other descriptive label for the content).
Inside that element place a heading and the rest of the info.

aria-controls, in my experience, does absolutely nothing so I don't
bother having people implement it.
aria-description, despite being part of the ARIA 1.3 spec has pretty
comprehensive browser/screen reader support so I recommend its use
where it makes sense for non-essential info.




Sure, these tables aren't ideal, I dont like any table where you start
ruining the tale structure by cramming things into one cell or use
cells that span multiple rows and columns, they get confuisng no
matter how you code them, but these are a popular pattern for a lot of
experiences and it's better to make it the best it can be rather than
digging a trench.


On 5/30/23, Laurence Lewis < = EMAIL ADDRESS REMOVED = > wrote:
> Glen, You make some interesting observations to consider. The tables I
> provided as examples were dummy content, it was the expanding functionality
> I was targeting rather than the relationship between the parent row and the
> expanded rows. The aria-description is not part of the ARIA specification,
> however it is already supported by both browsers and screen readers.
> Someone in the ARIA WG could probably add more information on why this has
> such wide support. It was Bryan Garaventa who originally introduced me to
> aria-description.
>
> The support for the Summary / Details HTML pattern does suggest it is now a
> viable option.
>
> Steve, thanks for the Adrian link. I noticed his approach is reasonable
> similar to my POCs in that he uses a disclosure widget with aria-expanded
> and aria-controls.
>
> I have something I can work with now, thank you both for your feedback.
>
> Laurence Lewis
> Accessibility Senior Specialist (Telstra, Brisbane Australia)
> > > > >


--
Work hard. Have fun. Make history.

From: Dean.Vasile@outlook.com
Date: Sun, Jun 04 2023 12:08PM
Subject: Re: Expanding Table rows - Can this be made accessible?
← Previous message | No next message

Is a JAWS user
I would be curious as to have that experience actually is with the screen reader

Dino

617-799-1162

Dino's Canteen 1618
11 Eglin St,
Hanscom AFB
Bedford, MA

> On Jun 4, 2023, at 2:01 PM, Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = > wrote:
>
> Yeap, we've been implementing similar table patterns in my web
> development area recently.
> Insert the extra info in the next row in the table (a cell that spans
> the whole row).
>
> Inside that cell place another element with role="group" and
> aria-label="info for x" (where x is a reference to the row header or
> other descriptive label for the content).
> Inside that element place a heading and the rest of the info.
>
> aria-controls, in my experience, does absolutely nothing so I don't
> bother having people implement it.
> aria-description, despite being part of the ARIA 1.3 spec has pretty
> comprehensive browser/screen reader support so I recommend its use
> where it makes sense for non-essential info.
>
>
>
>
> Sure, these tables aren't ideal, I dont like any table where you start
> ruining the tale structure by cramming things into one cell or use
> cells that span multiple rows and columns, they get confuisng no
> matter how you code them, but these are a popular pattern for a lot of
> experiences and it's better to make it the best it can be rather than
> digging a trench.
>
>
>> On 5/30/23, Laurence Lewis < = EMAIL ADDRESS REMOVED = > wrote:
>> Glen, You make some interesting observations to consider. The tables I
>> provided as examples were dummy content, it was the expanding functionality
>> I was targeting rather than the relationship between the parent row and the
>> expanded rows. The aria-description is not part of the ARIA specification,
>> however it is already supported by both browsers and screen readers.
>> Someone in the ARIA WG could probably add more information on why this has
>> such wide support. It was Bryan Garaventa who originally introduced me to
>> aria-description.
>>
>> The support for the Summary / Details HTML pattern does suggest it is now a
>> viable option.
>>
>> Steve, thanks for the Adrian link. I noticed his approach is reasonable
>> similar to my POCs in that he uses a disclosure widget with aria-expanded
>> and aria-controls.
>>
>> I have something I can work with now, thank you both for your feedback.
>>
>> Laurence Lewis
>> Accessibility Senior Specialist (Telstra, Brisbane Australia)
>> >> >> >> >>
>
>
> --
> Work hard. Have fun. Make history.
> > > >