👋 Next.js Conf 2024: Come build, party, run, and connect with us! See all events

Discussion on how to mark up tabular data for accessibility and responsiveness

12 replies
Last updated: Dec 6, 2022
HTML wise how would y'all mark this up? Would you use a
<table />
or a `&lt;ul /&gt;`&gt;
Dec 5, 2022, 4:40 AM
Looks like tabular data, but then you have those update-parts that spans the whole row, and as such would probably use a row of itself, and thus break the table (e.g. for screen readers).
My guess is to use &lt;table&gt;, but make sure to describe the tr- and td-elements (the latter using rowspan) containing the update with a ARIA role that differs it from the rest of the table. But don't know exactly how that would be done.
Dec 5, 2022, 7:03 AM
It would be interesting to see what the layout is for mobile and other variants as working with tables responsively can be really painful
Dec 5, 2022, 8:55 AM
With the advancements with css grid and flex support table may only suit large screens etc, so wouldn’t rule out a list tbh
Dec 5, 2022, 8:56 AM
This is how it looks on mobile
Dec 5, 2022, 2:21 PM
Yeah, this makes it function more as a list. Tables and small screens are notoriously hard. It seems like you're hiding the head columns as well on smaller screens? If so, I would mark it as a list, and then display/hide using media query. You probably also want to use ARIA roles for accessibility, check out https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Table_Role
Dec 5, 2022, 2:55 PM
Gotcha, 🤔 now I just gotta figure out how to use tailwind for all this 😅
Dec 5, 2022, 3:00 PM
Check out the section on responsive design, should be helpful. Also the section on Screen Readers wrt allowing you to hide head columns for non-screen readers on smaller screens
Dec 5, 2022, 3:05 PM
Yeah I was looking at the actual page and I noticed they use
grid-template-areas
and some custom
grid-template-columns
😅 last I checked Tailwind doesn't allow
grid-template-areas
, at least built in
Dec 5, 2022, 3:39 PM
If it's helpful, I had to do a big convoluted table and collapsing each row into its own card, where the former headers get represented on each row, which itself becomes stacked, can have some advantages. Not as interesting and designy but it's an option: https://miro.medium.com/max/720/1*WM6Gy53YMJ0WE-Xd9ebTCg.gif (originally covered here under "transformed" )
Dec 5, 2022, 4:27 PM
Getting there 😅 the mobile view could use some work...
Dec 6, 2022, 5:57 AM
But for just throwing something together quickly... Not too bad
Dec 6, 2022, 5:58 AM
If the idea of the table is a transfer between schools, you might be able to get away with a double arrow between the school logos and not even have to keep the squishy header labels. You can always have a key/legend explain the icon use. But I think people might catch on pretty quickly especially if they keep using the site.
Dec 6, 2022, 3:10 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?