Wikipedia

Wikipedia:Manual of Style/Accessibility/Data tables tutorial

< Wikipedia:Manual of Style | Accessibility
This is an old revision of this page, as edited by Dodoïste (talk | contribs) at 23:31, 29 August 2010. The present address (URL) is a permanent link to this revision, which may differ significantly from the current revision.

Criterions on this page are prioritized according to impact (W3C's accessibility level of priorities: A, AA or AAA) and degree of feasibility (with MediaWiki's syntax and the burden it places on users).

Correct headers structure

  • Priority: high (A accessibility level)
  • Difficulty: ... (not yet rated)

Examples needed to build the tutorial

Several column headers placed inside the tables to separate visually the table, see the example on the best practices. Split the table in several tables.

Row header not relevant as a header (date is chosen instead of the album title), example

Utilisateur:Ascaron/couveuse: "example" section is under correct row headers, but has nothing to do with column headers. This table mixes data with layout.

Bad structure and visual order, with icons and couloured example, partial correction.

Images and color

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

Images

  • Priority: A (A accessibility level)
  • Difficulty: ... (not yet rated)

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: high (A accessibility level)
  • Difficulty: ... (not yet rated)

Examples needed to build the tutorial

Data conveyed by color alone: Fiscal calendar#Chart of Different Fiscal Years.

Bad structure and visual order, with icons and couloured example, partial correction.

Providing abbreviations for long headers

  • Priority: low (AAA accessibility level)
  • Difficulty: ... (not yet rated)

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.

Bonus guidelines

Provide meaningful and precise headers title

  • Priority: highly recommended bonus (this is not an accessibility criterion, but is an important usability criterion)
  • Difficulty: ... (not yet rated)

Examples needed to build the tutorial

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

Row headers spanning several rows (without more precise sub row headers), example with an issue on the date, see http://webaim.org/techniques/tables/data#spanned

Avoiding more than two levels of headers

  • Priority: unknown (recommended by WebAIM techniques)
  • Difficulty: ... (not yet rated)

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

Avoiding rowspan/colpan

  • Priority: bonus (this criterion is not part of any accessibility referential and has limited impact)
  • Difficulty: very high (Users like those attributes for presentation and are reluctant to remove them. We should not force them otherwise they will be disgusted of accessibility. This change can only be done with volunteers users and is fragile as anyone can jump in and disagree.)

Some old screen readers and some user agents that does not conform to UAAG do not handle rowspan / colspan efficiently. The result can be very confusing for users of these technologies.

However, most widely used assistive technologies do support these attributes. For example, JAWS support it since JAWS 6.0 (march 2005).

Couldn't think of a title

  • 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
Retrieved from "https://en.wikipedia.org/w/index.php?title=Wikipedia:Manual_of_Style/Accessibility/Data_tables_tutorial&oldid=381784576"