Your daily frequent11y newsletter, brought to you by @ChrisBAshton:

Accessible Front-End Patterns For Responsive Tables (Part 1)

Adrian Bece writes two in-depth articles about implementing responsive tables.

He shares Adrian Roselli’s JavaScript snippet that applies the correct ARIA roles to table elements, which are to ensure that browsers continue to keep good table semantics even when certain CSS styles are applied. The snippet is from 2018, but an update in December 2022 suggests it is still needed for Safari. Note that the JS itself isn’t needed, but the resulting markup, which you could add to your HTML manually or in a preprocessor.

Tables should have a <caption> element as the first child, with a nested heading describing the contents of the table. If it can’t be the first child – e.g. because you’ve added a wrapper element to make the table scrollable – you’ll need to include the table in a <figure> element, use a <figcaption> for the title, and apply a aria-labelledby to the table’s wrapper.

Small / simple tables can be made neatly responsive with table { width: fit-content }, to remove any unnecessary space when viewing on larger screens. For tables with lots of columns, it becomes necessary to horizontally scroll, by applying an overflow: auto to the wrapper element, alongside a tabindex="0" to make it usable for keyboard users.

Some OS’s hide scrollbars by default (I’m looking at you, macOS!), so you may want to consider adding a shadow gradient to indicate the table is scrollable. With background-attachment: local, local, scroll, scroll;, you can subtly hide and show the shadow on either ‘edge’ of the table depending on the direction you scroll. Another visual cue to let the user know a table is scrollable is to force a crop of the last visible column. You may want to consider making the table headers sticky, to keep them in view as you scroll.

Adrian then discusses the stacking approach; useful for tables where the data isn’t supposed to be ‘compared’, e.g. a table of people and their contact information. In the demo, each ‘row’ gets pulled into its own ‘block’ on smaller screens. But this can make pages very tall on mobile. An alternative is the accordion pattern, where you may choose to only show the primary data column (e.g. user’s name) on smaller screens, with a button to expand and reveal the other columns as needed (see demo). Another space-saving option is to give users the ability to show/hide columns.

In Part 2, Adrian looks at patterns for much larger tables, including how to improve their rendering performance by either paginating the results, virtualising the rendering (i.e. keeping the table in memory but only rendering the number of DOM nodes you need in view), or exploring the CSS contain: strict property. Adrian also touches on JavaScript libraries for enhancing tables, and some other special use cases such as rendering calendars.

Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.