Tests on screen readers when using "responsive data tables"

Jason Kiss has posted some results from his tests done on various screen readers on pages with the so-called “responsive data tables” (I guess “responsive” is the new “also works on mobiles and stuff” hype term… bleh).

Anyway, this is pretty interesting!


Apparently, some browsers are telling some AT (accessibility technology) that a table isn’t a table when your data table is set to display: block (or any of its parts), as seen in Chris Coyer’s “Responsive Data Tables” experiment (link to that is on Jason’s page). Seems to depend on the browser what the table is reported back as.
For Saffy-VO and NVDA-Firefox (Win), this means table navigation is gone, and the CSS-created content is read out. This would also mean then that the semantic relationship between your rows and columns are gone, but then while I’ve used this technique (and I’d only tested it in JAWS where I just got a regular table) on a long silly table, it’s probably better to keep this change to simple, small tables. A complex table relying on stuff like axis or headers probably loses a lot more data than you want to bother faking back in with CSS.

JAWS is still treating them as tables, but since it’s sticking to the old policy of not announcing CSS-created content, and giving users regular table feedback and navigation… really, no change for those users, except of course their browsers shouldn’t be showing a “responsive” table unless they’ve shrunk their browser to the width of a mobile phone.

Assuming tables are set to display: block specifically for this “responsive” effect (making them fit on a screen the size of a mouse turd), could we ignore JAWS (and Window-Eyes) at this point anyway… until more Microsoft phones are out anyway? While I know VO has stepped over to iWhatevers pretty well, I dunno if there are any mobile versions of the Big Two for Windows.

Oh cool, Jason twotted this initiative for accessible mobile:

Code Factory: Making mobile phones and PDAs accessible to the blind and visually impaired

Currently no mobile versions of the Big Two for Windows…

Interesting approach – beats the tar out of the content cloaking I’ve seen other people use to implement the same basic idea.

I assume you’re talking about the “responsive” tables thing…
Chris Coyer did call it an experiment, but I’ve already succumbed to using it when our site need to fit on mouse-turd screens… but had these big insurance tables in them.

Though I didn’t use the data-* attributes for grabbing the content, which normally is nicer than hand-writing in the CSS, but in my case that was just way too much text… technical jargon doesn’t do well on mobile, esp if it’s in a language that tacks words together to create onebiglongword instead.

It looks like Jason didn’t drop in role=“grid” in…