Responsive Table pattern loses semantics at narrow size

[aardrian]

Issue

For the responsive table on this page:
https://a11y-style-guide.com/style-guide/section-structure.html

When the narrow viewport styles kick in, the semantics are lost. This is a known issue across browsers (back to 2011 and again in 2018).

This means a screen reader user will get no structure, and will be unable to navigate the content as a table.

ARIA table roles can fix this until browsers fix their bugs. I have a function authors can use in the meantime. Cannot find bugs right now.

The accessibility inspector in Chrome/Windows showing the example table in a large viewport. The table structure is visible.

The accessibility inspector in Chrome/Windows showing the example table in a narrow viewport. The table structure is now absent.

[cehfisher]

Yes, responsive tables have some issues to work out for sure. I'll look into implementing the pattern updates you suggest and will send it back to you for a quick review soon. Thanks!