Wikipedia:Manual of Style/Accessibility/Data tables tutorial: Difference between revisions

Revision as of 07:59, 12 December 2021

Revision as of 19:25, 12 December 2021

Line 273:

In contrast with simple tables which only have one or two levels of headers, complex tables have more than two. Most likely you will only need up to four levels of headers. Anything more than that should probably be split into a separate table.

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>