Fixed Layout Accessiblity technique for Tables #2677
Conversation
This is a draft proposal for the Table section. I wonder if we should add the table renderings to the examples.
|
Here is a Preview. It looks like I can't assign reviewers, so naming here @clapierre |
Please excuse my french.
epub33/fxl-a11y-tech/index.html
Outdated
| <tr> | ||
| <th scope="col">Header 1</th> | ||
| <th scope="col">Header 2</th> | ||
| <th scope="col">Header 3</th> |
There was a problem hiding this comment.
Missing id's for Heading1, Heading2, and Heading3.
Would it be better example to have instead a single Heading1 span all 3 columns
Then have 3 sub-headings 2,3,&4 here.
Then each data cell would refer to the main two column headers="header1 header2", "header1 header3" and "header1 header4"
I haven't seen using the row header as this would normally be spoken anyways.
There was a problem hiding this comment.
Something like:
| Header 1 | ||
|---|---|---|
| Header 2 | Header 3 | Header 4 |
| Row 1 | Data 1 | Data 2 |
| Row 2 | Merged Data | Data 3 |
| Row 3 | Data 4 | |
There was a problem hiding this comment.
<table>
<caption>Complex Data Table with Merged Cells</caption>
<thead>
<tr>
<th id="main-header" colspan="3" scope="col">Header 1</th>
</tr>
<tr>
<th id="sub-header-2" scope="col">Header 2</th>
<th id="sub-header-3" scope="col">Header 3</th>
<th id="sub-header-4" scope="col">Header 4</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" id="row1">Row 1</th>
<td headers="main-header sub-header-2">Data 1</td>
<td headers="main-header sub-header-3">Data 2</td>
</tr>
<tr>
<th scope="row" id="row2">Row 2</th>
<td headers="main-header sub-header-2" rowspan="2">Merged Data</td>
<td headers="main-header sub-header-3">Data 3</td>
</tr>
<tr>
<th scope="row" id="row3">Row 3</th>
<td headers="main-header sub-header-4">Data 4</td>
</tr>
</tbody>
</table>
| </tbody> | ||
| </table> | ||
| </pre> | ||
| </aside> |
There was a problem hiding this comment.
Would it be a good idea to actually render what the table would look like below the code example?
There was a problem hiding this comment.
I tried but got fouled by CSS and did not have a lovely displayed table.
There will be need for CSS to ensure lovely display.
|
Updated Preview |
|
FIrst example looks great the 2nd table is duplicated with the changes and then followed by the same table without the changes before the rendered view. |
|
Right, online editing is not the best way for me. It should be fixed now. See updated preview. |
epub33/fxl-a11y-tech/index.html
Outdated
| <caption>Complex Data Table with Merged Cells</caption> | ||
| <thead> | ||
| <tr> | ||
| <th id="main-header" colspan="3" scope="col">Header 1</th> |
There was a problem hiding this comment.
I believe here the scope should be scope="colgroup"
epub33/fxl-a11y-tech/index.html
Outdated
| <caption>Complex Data Table with Merged Cells</caption> | ||
| <thead> | ||
| <tr> | ||
| <th id="main-header" colspan="3" scope="col">Header 1</th> |
There was a problem hiding this comment.
scope="colgroup" here as well.
| </table> | ||
| </pre> | ||
| <p>That will render as:</p> | ||
| <table> |
There was a problem hiding this comment.
I think adding the gridlines will be a nice touch
There was a problem hiding this comment.
I agree but was unable to do so as I don't understand the CSS cascade for those documents...
| </table> | ||
| </pre> | ||
| <p>That will render as:</p> | ||
| <table> |
@wareid This is a draft proposal for the Table section.
I wonder if we should add the table renderings to the examples.