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).
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.
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.
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.