search

cehfisher / a11y-style-guide

Accessibility (A11Y) Style Guide
http://a11y-style-guide.com/style-guide
MIT License
558 stars 61 forks source link

Responsive Table pattern loses semantics at narrow size #257

Open aardrian opened 5 years ago

aardrian commented 5 years ago

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. 2019-09-05 (1)

The accessibility inspector in Chrome/Windows showing the example table in a narrow viewport. The table structure is now absent. 2019-09-05 (2)

cehfisher commented 5 years ago

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!