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:

The following roles and attributes are used for the list-esque Example 2:

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.

A Caption
Column Header 2
Columm Header 3
Columm Header 4
Row Header 2
Cell Row 2, Column 2
Cell Row 2, Column 3
Cell Row 2, Column 4
Row Header 3
Cell Row 3, Column 2
Cell Row 3, Column 3
Cell Row 3, Column 4
Row Header 4
Cell Row 4, Column 2
Cell Row 4 Column 3 (headers column 4 and row 2)
Cell Row 4, Column 4
Another Caption
Column Header 2
Columm Header 3
Columm Header 4
Row Header 2
Cell Row 2, Column 2
Cell Row 2, Column 3
Cell Row 2, Column 4
Row Header 3
Cell Row 3, Column 2
Cell Row 3, Column 3
Cell Row 3, Column 4
Row Header 4
Cell Row 4, Column 2
Cell Row 4, Column 3
Cell Row 4, Column 4

Example 2: Two partial months in a table layout, that implement heading + list semantics

August
Sunday, August 22, 2021
Monday, August 23, 2021
Tuesday, August 24, 2021
Wednesday, August 25, 2021
Thursday, August 26, 2021
Friday, August 27, 2021
Saturday, August 28, 2021
Sunday, August 29, 2021
Monday, August 30, 2021
Tuesday, August 31, 2021
September
Wednesday, September 1, 2021
Thursday, September 2, 2021
Friday, September 3, 2021
Saturday, September 4, 2021
Sunday, September 5, 2021
Monday, September 6, 2021
Tuesday, September 7, 2021
Wednesday, September 8, 2021
Thursday, September 9, 2021
Friday, September 10, 2021
Saturday, September 11, 2021