Wikipedia:Manual of Style/Accessibility/Data tables tutorial

Providing abbreviations for long headers

• Priority: ... (... accessibility level)
• Difficulty: ...

Voice browsers might read aloud this data table in the following order:^[1]

Caption: [caption text]
[column header 1]: [row header 1], [column header 2]: [cell 1,2], [column header 3]: [cell 1,3]
[column header 1]: [row header 2], [column header 2]: [cell 2,2], [column header 3]: [cell 2,3]

...

Note that each column header is repeated when reading every row, so an abbreviation could be added to long headers using the abbr="..." attribute^[2], for example:

{|
|+ [caption text]
|-
! scope="col" abbr="Wikipedian" | Wikipedia editor
! scope="col" abbr="Edits"      | Number of edits
! scope="col"                   | Last edit
! scope="col" abbr="Donations"  | Donations (US$)
|-
...

In this example all column headers have an abbreviation except the column with the date of the last edit, which is short enough.

Avoiding more than two levels of headers

• Priority: ... (... accessibility level)
• Difficulty: ...

Tables should not contain more than two levels of headers (which means 1) headers 2) sub-headers; but no 3) sub-sub headers)^[3].

Bonus guidelines

Couldn't think of a title

• Priority: ... (... accessibility level)
• Difficulty: ...

Row or column headers should not use colspan/rowspan to span several rows or columns without providing sub-headers.

Images and color

Images or colors inside a table should meet the requirements for images and color.

Images

• Priority: ... (... accessibility level)
• Difficulty: ...

Images used in tables are usually decorative icons so they need either:

1. a minimal alt text (|alt= ...);
2. to be unlinked and empty alt text (|link=|alt=).

For details and explanations concerning images that are not decorative, see WP:ALT.

Note that images in headers can by particularly annoying for screen reader users if they are badly handled. If the image doesn't comply to the criterions above, the filename will be part of the header title. The filename will be read aloud in every cell under the header containing the icon.

Color

• Priority: ... (... accessibility level)
• Difficulty: ...

References

1. http://www.w3.org/TR/WCAG10-HTML-TECHS/#identifying-table-rows-columns
2. Associating header information with data cells, W3C
3. Avoid Tables with More than Two Levels of Row and/or Column Headers, Creating Accessible Tables, 2. Data Tables, WebAiM