RE: multi-col table layout Fwd: accessible tables

For what it worth…

I did some experimentation in that area in Sciter.

Idea was to modify flow:row(…) – grid alike layout manager that I already have.

Here is screenshot of the result: https://sciter.com/css-multirow/

Markup used:

<dl>
  <header>caption of the table</header>
  <dt>001</dt><dd>first</dd>     
  <dt>002</dt><dd>second</dd>     
  <dt>003</dt><dd>third</dd>     
  <dt>004</dt><dd>fourth</dd>     
  <dt>005</dt><dd>fifth</dd>     
  <dt>006</dt><dd>sixth</dd>     
  <dt>007</dt><dd>seventh</dd>     
  <dt>008</dt><dd>eighth</dd>     
  <dt>009</dt><dd>nineth</dd>
</dl>

And styles 

dl { flow: row(dt,dd); }  /* two columns */
dl.two-cols { flow: row(dt,dd,dt,dd); } /* four columns */

Where 

flow: row( …tag-list… )

generates grid layout where each row is composed from children in tag-list. Number of columns – number of tags in the list. If there is a child not in the list it gets replaced as an element spanning  whole row.

There are two problems in regard of your requirement:

1. Order of elements (should be in column first order) – that can be tackled by some modifier that will cause proper transposing of cells.
2. Column headers population on demand. 

And #2 is tough as CSS has no means to generate DOM elements. It can generate out of DOM boxes ( ::after, ::before ) but not DOM elements that are needed here.
Think about event click handling on such generated header elements (even if we will come up with something), what event.target reference will be in this case?

Andrew Fedoniouk.

http://sciter.com

From: Chaals Nevile
Sent: May 7, 2018 12:51 AM
To: www-style@w3.org
Subject: multi-col table layout Fwd: accessible tables

Hi,

This request comes from accessibility requirements for presenting a table,  
and when I was playing around with it there seems no way to break up a  
table over two or more columns, as described below.

As far as I can tell the right place to handle this is CSS rather than  
HTML (although it may be in the intersection) and being a feature request  
for tables I have a nasty suspicion it is not trivially easy, but asking  
seems worthwhile.

Any thoughts to offer?

(The alternative is to make a JS library to draw the table and decorate it  
with aria and so on, which as far as I can see is entirely feasible but  
kind of frustrating...)

cheers

Chaals

------- Forwarded message -------
From: "Michael A. Peters" <mpeters@domblogger.net>
To: "WAI Interest Group" <w3c-wai-ig@w3.org>
Cc:
Subject: accessible tables
Date: Fri, 04 May 2018 22:21:27 +0200

Hello,

I am sure this is covered somewhere, but I just can not find where.

Tabular data, 9 pairs of key = value data. But the table cell contents
are short, so instead of just two columns I want to do four columns
where the third is a continuation of the first and the fourth is a
continuation of the third, e.g.

[ caption of the table]
[ key ] [ value ] [ key ] [ value ]
001     first     006     sixth
002     second    007     seventh
003     third     008     eighth
004     fourth    009     tenth
005     fifth


Is there a way to mark that up so screen readers will read them as pairs
in the order 001 to 009 in order?

I can't be the first to have needed this.


-- 
Chaals: Charles (McCathie) Nevile    find more at https://yandex.com
Using Opera's long-abandoned mail client: http://www.opera.com/mail/
Is there really still nothing better?