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

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

Example 3: Five columns into two, responsive table

Account Number
Account Holder
Account Type
Balance
Bank Name
1234567890
John Doe
Checking
$1000.00
First National Bank
472349872
Jane Doe
Savings
$2000.00
First National Bank
8234092
Peter Parker
Checking
$3000.00
Second National Bank
90823984931
Mary Jane Watson
Savings
$4000.00
Second National Bank
676767090
Bruce Wayne
Checking
$5000.00
Third National Bank