WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Birkir R. Gunnarsson
Date: Jun 4, 2023 12:01PM

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 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.