Table tips: Add table headers tips for mobile

[brewerj]

Proposed two new tips ("Responsive design" and "Defining Table Headers") to improve coverage for responsive design of tables. Other placements might be possible and discussion is welcome, but this seemed like a good potential fit.

If confirmed, add note "Developed with support from WCAG TA Project"

[yatil]

I personally think this is a bit too vague. What about:

Defining table headers: If a table is must be rendered with multiple <table> elements, use aria-describedby to assign headers. If a table is rendered as a list, column and row headers should be available as text in the list’s outline.

(I am unsure how to glue together two tables using ARIA, it seems to be an awful solution. How does one ensure keyboard and screen reader compatibility? Can we link to some documentation on how to do that?)

[lakeen]

I was also confused by "If a table is rendered as multiple tables, ARIA should be used. " Is this related to the above tip about using distinct <table> and not separating tables within a table?

I was also wondering if these tips are really edits to the text above the shareable code examples. It wasn't clear as to how they would get implemented.

[iamjolly]

If we're talking about nested tables when saying "If a table is rendered as multiple tables..." then I feel like we should explicitly say that. So, perhaps a slight edit on @yatil's wording would work (if nesting tables is the issue we're describing here) such as:

Defining table headers: If a table must be rendered with multiple, nested <table> elements, use aria-describedby to assign headers. If a table is rendered as a list, column and row headers should be available as text in the list’s outline.

[yatil]

I hope we are not talking about nested tables because nested tables are bad, especially in the mobile context. I was thinking that the use case is ”I got a table with 6 (content) columns but only two columns fit the screen, so I break the table up in three tables with 2 columns each.”

I guess we need clarification on the use case here.

[AndrewArch]

”I got a table with 6 (content) columns but only two columns fit the screen, so I break the table up in three tables with 2 columns each.”

Aren't there other techniques for tables on small screens than artificially creating a table out of smaller tables?

[yatil]

There certainly are. https://www.w3.org/WAI/Policy/ reformats the table to make sense (using CSS grid layout):

(Simulated) Smaller iPhone:

A grid with 2 by 4 cells, country and date share the top row, the legislation name spans the second row. The other data is filling up the four other cells.

(Simulated) Bigger iPhone:

Reformatted to four columns with three columns combined at the top as a header section:

[sharronrush]

+1 to the Responsive Design addition.

However, there seems to be a lack of agreement on the extent and clarity of the content on Table Headers that needs discussion. Perhaps add to the agenda?

[bakkenb]

Agree with adding to the agenda to clarify what is meant by "If a table is rendered as multiple tables." I think if we can agree on the actual meaning then we can clarify the language in the tip sentence and maybe give some sort of example use in parenthesis.

[hkramer]

I think I concur that the Responsive Design addition is helpful and clear. The Table Header addition is confusing. Not sure if it directly relates to the breaking up of complex tables into multiple simpler tables. Eric's version is an improvement.

[yatil]

I will add the responsive design note but leave out the responsive headers for now, especially as one of the ideas for the new 2019 Tutorials is to address responsive tables in-depth.

#593

[brianelton]

I think that we can add to the responsive design note that is in PR #718 to note that CSS grid layout can be used to ensure the visual relationship is maintained instead of creating a new note about defining table headers.

[brianelton]

I would like to close this PR and will bring it up in the EOWG.

[brianelton]

Closing PR in favor of #718