WebAIM - Web Accessibility In Mind

E-mail List Archives

Expanding Table rows - Can this be made accessible?

for

From: Laurence Lewis
Date: May 29, 2023 4:29PM

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)