Flexible data tables with CSS Grid

Re:Flexible data tables with CSS Grid by robin_reala on Saturday May 18, 2019 @11:17AM (#19947869)

I wouldn’t do this, or at least I’d do a bunch of accessibility testing before implementing this (something which wasn’t mentioned in the article).

Assistive tech allows column and row access to tables that have the default display:table styling. Setting them to display:block (a common approach for mobile historically) typically removes the ability for people to navigate in this way. I would imagine that changing to display:grid does the same.

More info at https://vimeo.com/139062429 as an example.

[ Parent | on HN ]

Re:Flexible data tables with CSS Grid by Macha on Saturday May 18, 2019 @01:34PM (#19948611)

Would setting the appropriate aria roles help here?

[ Parent | on HN ]

Re:Flexible data tables with CSS Grid by gedy on Saturday May 18, 2019 @01:59PM (#19948755)

Yes I believe so, there are ARIA roles for tabular data:

https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...

[ Parent | on HN ]

Re:Flexible data tables with CSS Grid by robin_reala on Saturday May 18, 2019 @04:16PM (#19949507)

That relies on assistive tech supporting them. I’m not saying they don’t, but historically it’s been lacking. Great if they do, but testing would absolutely be needed.

[ Parent | on HN ]