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

Revision as of 21:52, 22 December 2021

Revision as of 21:56, 22 December 2021

Line 271:

== Complex tables ==

In contrast with simple tables, which only have one level of column headers that span one column (<code>! scope="col" | </code>) and/or one level of row headers that span one row (<code>! scope="row" | </code>), complex tables have headers that aren't clear and can cause accessibility issues. To avoid these issues, relationships should be clearly defined.

When headers span multiple rows, you need to clearly identify its relationship. When a column header spans two columns, use <code>! scope="colgroup" colspan="2" | </code>. When a row header spans two rows, use <code>! scope="rowgroup" rowspan="2"| </code>.<ref name="H63" group="WCAG"/>

For tables with headers that are more complex, it is recommended to simplify the table or split it up into smaller tables. When this isn't possible, you have to associate each cell to their respective header(s) using the "'''id'''" and "'''headers'''" attributes instead of "'''scope'''". On the headers, set the "id" to an un-spaced value that is unique within its table. On the cells that are described by headers, set the "headers" to a spaced list of the describing "id" values in an order that 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> For example, the following code has the header of "Company" describing the company "ABC" (<code>! id="col1" | Company</code> and <code>| headers="col1" | ABC</code>).