Table
Experiments Using CSS Grid and Table Properties
Do HTML table-like things made using div elements with appropriate roles give the ability to create
screen-reader navigable
tables with proper semantics? What about list semantics?
Tables use CSS table and grid layouts for visual appearance — table for desktop and grid for mobile resolutions in Example 1 — but those CSS properties were chosen only for purposes of experimentation and should not have an impact on accessibility.
The following roles and attributes are used for the table-esque Example 1 (and Example 3, though not as many are used):
tablerowcolumnheaderrowheadercell-
headingwitharia-levelfor the table caption that is then associated with the tabledivviaaria-describedbyto create a caption for the table headersandidto override the natural column and row header associations
The following roles and attributes are used for the list-esque Example 2:
listlistitemheadingwitharia-levelfor the months that are inbetween the lists
Example 1: Two responsive 2-D tables
with four columns
Note on header sticky-ness: Since the header, as implemented below, is inside the first table structure, it only sticks to the first table. To create a more robust table header-like object (which might incorporate controls for sorting or other interactive or not-interactive text), a strategy would be to visually hide the header row on every table (just happening on second table, currently) and then create a faux header region, perhaps out of an unordered list, and use it for the sort control or for other content that is not strictly stuff that should go into a header row. This faux table header row could then stick at the top of the tables area. Screen readers would still percieve the structure as multiple tables, each with a repeating header row, and would interact with the sticky controls list as a separate element.