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

Yeah. Another one. Let’s recap:

Those combined 8,226 words begat these posts:

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.

No comments? Be the first!

Leave a Comment or Response

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>