search

filamentgroup / tablesaw

A group of plugins for responsive tables.
MIT License
5.48k stars 434 forks source link

Fix stacked table on mobile for screen readers (A11y fix) #386

Closed kbeck303 closed 2 years ago

kbeck303 commented 4 years ago

Set the mobile table element to block display.

This CSS change allows screen readers to access the mobile table content, which has already been changed to a block display.

lkmorlan commented 4 years ago

The best solution to this would make tables appear to screen readers the same in all views, regardless of screen width. The regular headings could be displayed to screen readers while tablesaw-cell-label is hidden.

BrumGB commented 2 years ago

It's worth noting that this may strip the semantic accessibility tree of the table in in older browsers 😢 (source) This fix does however work great on my iPhone and all modern browsers. Unfortunately I cannot find a list of browsers when this was changed.

I usually follow how the gov.uk site does things accessibility wise and display: block is used on there.