Tables, JSON, CSS, ARIA, RWD, TLAs…

Yeah. Another one. Let’s recap:

• In 2012 I asked that we get back to using HTML tables for tabular data in my post It’s OK to Use Tables,
• In November I argued that we need to avoid ARIA grid patterns for tables in Hey, It’s Still OK to Use Tables,
• Then I had an immediate follow-up post on making accessible tables that are responsive to print, screen size, WHCM, etc., in A Responsive Accessible Table,
• I wrapped up the series by explaining how browsers break table semantics when CSS display properties come into play with Tables, CSS Display Properties, and ARIA.

Those combined 8,226 words begat these posts:

• Short note on what CSS display properties do to table semantics by Steve Faulkner, and
• Data Tables by Heydon Pickering (go read it).

This post builds a bit on Heydon’s React example. Sorta. I am not a React guy, which in itself is not a judgment on React. I am more of a vanilla JavaScript guy who prefers to offload as much HTML generation to the server as possible. But I understand the value in using client-side script to dynamically generate tables (typically from JSON).

His React example also gets around how browsers destroy table semantics when CSS display properties are used. He does this by converting the table to a list. A great solution for simple tables (like the one I keep using in my examples) when using React.

I took a different approach here. I am using vanilla JavaScript to parse a pile of JSON into a table. I am also adding the necessary ARIA roles when the table is generated so even when you use the responsive technique I offered in previous posts, the browser does not kill the table semantics.

This approach is not better, just different. It is informed from my experience running tests with screen reader users and seeing expectations get blown up when the table becomes something else entirely. We know users sometimes switch devices mid-task. We know that sometimes blind screen reader users are running browsers in window sizes that trigger responsive styles (and they don’t know it). We know screen reader users sometimes receive support geared toward the “desktop” layout of a page. And so on. All of these tell me that for my cases, keeping it semantically a table regardless of viewport is the better approach.

You should use whichever approach works for your users. That being said, I made a CodePen of my JSON-powered accessible responsive table and embedded it below.

See the Pen JSON-Powered Responsive Table with Semantics Retained by ARIA by Adrian Roselli (@aardrian) on CodePen.

Feel free to tear into the JavaScript. It is not exactly my best language. Shouting is still my best language.

Fun fact — since I am lazy I pulled the JSON parsing script from my JSON-powered CSS-grid-driven Shadowrun character sheet. Because my priorities are weird.