Wikipedia:Manual of Style/Accessibility/Data tables tutorial: Difference between revisions
Content deleted Content added
Jroberson108 (talk | contribs) m →Complex tables: Switch to empty td. "Table headers should never be empty. This is particularly of concern for the top-left cell of some tables" per https://webaim.org/techniques/tables/data |
Jroberson108 (talk | contribs) m →Complex tables: Explain order of ids. |
||
Line 276:
When a header spans two columns or rows, use <code>! scope="colgroup" colspan"2" | </code> or <code>! scope="rowgroup" rowspan"2" | </code> respectively to clearly identify the header as a column header of two columns or a row header of two rows.<ref name="H63" group="WCAG"/>
When headers aren't clear and you cannot split the table into simpler tables per recommendations, this can cause accessibility issues; therefore, you have to associate each cell to their respective header(s) using '''id''' on the headers and '''headers''' on their respective data cells (e.g. <code>! scope="col" id="abc" | abc</code> and <code>| headers="abc" | 123</code>). Each id should have a value that is unique to that table without spaces. If a cell belongs to multiple headers, list the header ids separated by spaces in the order in which a screen reader should read them.<ref name="H43" group="WCAG">[https://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H43.html "H43: Using id and headers attributes to associate data cells with header cells in data tables"], accessibility level: A</ref>
Below is an example of a complex table with headers that aren't clear. Look at the source code of this section to see how each cell's id and headers are defined.
| |||