Wikipedia:Manual of Style/Accessibility/Data tables tutorial: Difference between revisions
Content deleted Content added
use syntaxhighlight instead of pre |
Jroberson108 (talk | contribs) →Complex tables: Display code. |
||
Line 276:
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 <code>id</code> and <code>headers</code> attributes instead of <code>scope</code>. On the headers, set the <code>id</code> to an unspaced value that is unique on the page. 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 markup has the "Company" header describing the "ABC" company (<code>! id="col1" | Company</code> and <code>| headers="col1" | ABC</code>).
Below is an example of a complex table with headers that aren't visually clear
{| class="wikitable"
Line 304:
| headers="b d z" | b d z
|}
<syntaxhighlight lang="wikitext">
{| class="wikitable"
|-
|
! id="a" | a
! id="b" | b
|-
! colspan="3" id="c" | c
|-
! id="w" headers="c" | w (c)
| headers="a c w" | a c w
| headers="b c w" | b c w
|-
! id="x" headers="c" | x (c)
| headers="a c x" | a c x
| headers="b c x" | b c x
|-
! colspan="3" id="d" | d
|-
! id="y" headers="d" | y (d)
| headers="a d y" | a d y
| headers="b d y" | b d y
|-
! id="z" headers="d" | z (d)
| headers="a d z" | a d z
| headers="b d z" | b d z
|}
</syntaxhighlight>
== Images and color ==
| |||