Wikipedia:Manual of Style/Accessibility/Data tables tutorial

From Wikipedia, the free encyclopedia
Jump to: navigation, search
Shortcuts:

This tutorial is a guideline which, as part of Wikipedia's Manual of Style, is intended to assist those creating data tables (or more often lists) in ensuring the content is accessible to all.

Guidelines on this page are ordered by priority and difficulty. The priority comes from the official ranking for accessibility requirements (A, AA or AAA) made by the World Wide Web Consortium (W3C). The difficulty indicates if it seems easy or not for Wikipedia users to comply to the guidelines.

Guidelines here essentially follow W3C's Web Content Accessibility Guidelines 2.0 approach, and some trusted sources like WebAIM when relevant. A review by an accessibility expert was necessary to ensure WCAG 2.0 was interpreted correctly; this review was made in September 2010.[note 1]

Overview of basics[edit]

  • Priority: high (accessibility level: A)
  • Difficulty: easy (the syntax is fairly simple and editors get used to it; the layout might changes users' habits)
{| class="wikitable"
|+ [caption text]
|-
! scope="col" | [column header 1]
! scope="col" | [column header 2]
! scope="col" | [column header 3]
|-
! scope="row" | [row header 1]
| [normal cell 1,2] || [normal cell 1,3]
|-
! scope="row" | [row header 2]
| [normal cell 2,2] || [normal cell 2,3]
...
|}

which gives:

[caption text]
[column header 1] [column header 2] [column header 3]
[row header 1] [normal cell 1,2] [normal cell 1,3]
[row header 2] [normal cell 2,2] [normal cell 2,3]
Caption ( |+ )
A caption is a table's title, describing its nature.[WCAG-TECH 1]
Row and column headers ( ! )
Like the caption, these help present the information in a logical structure to visitors.[WCAG-TECH 2] The headers help screen readers render header information about data cells. For example, header information is spoken prior to the cell data, or header information is provided on request.[1]
Scope of headers ( ! scope="col" | and ! scope="row" | )
This clearly identifies headers as either row headers or column headers[note 2] Headers can now be associated to corresponding cells.[WCAG-TECH 3]

Layout of table headers[edit]

As you can see in the example above, row headers correctly formatted are boldened. This is the standard behavior across the internet, and the default rendering in browsers. But some Wikipedia users might not like it, especially if their wikiproject is used to a different layout.

Thus, the class for tables "plainrowheaders" was created to make row headers look more like normal cells, so that they don't stand out visually[note 3]. Please note that the use of "plainrowheaders" is not necessary, it's a choice of layout. It is up to the users to choose if they want it or not.

To use "plainrowheaders", place it in a class= attribute at the beginning of the table (like "wikitable"):

{| class="wikitable plainrowheaders"

Correct table captions[edit]

  • Priority: high (accessibility level: A)
  • Difficulty: easy (the syntax is fairly simple and already in use; the layout slightly changes users' habits)

A data table needs a table caption that roughly describes what the table is about.[WCAG-TECH 1] It plays the role of a table header. Table captions are made with "|+".[note 4] Example from Tobin Bell#Filmography:

Bell's television appearances and roles
Title Year Role Notes
Equalizer, TheThe Equalizer 1988 Episode: "The Day of the Covenant"
Perfect Witness 1989 Dillon TV film
Alien Nation 1990 Brian Knox Episode: "Crossing the Line"

Table captions consisting of one single word like "actor", "film" or "television" – as in a previous revision of Tobin Bell's filmography – are inadequate as they are not descriptive enough.

Avoiding column headers in the middle of the table[edit]

  • Priority: high (accessibility level: A)
  • Difficulty: medium (requires large changes to tables, editors seem reluctant to split tables, needs more testing and feedback)

Do not place column headers in the middle of a table to visually separate the table. Assistive technologies will get confused as they cannot know which previous headers still apply to parts of the table after the first one.

For example, a screen reader reading the cell "Stuttgart, Germany" might associate the cell with the following headers: "Venue, Representing Soviet Union, Representing Belarus". Three headers are read aloud. The first and the third are correct and expected. But "Representing Soviet Union" does not apply to the lower half of the table, and a machine does not understand that. Thus, a machine will not be able to associate header and cells correctly, and will provide misleading information about the table structure to the user.

In most cases, the easier solution is to split the table into several sub-tables with explanatory sub-headings (first example).

Column headers: bad example[edit]

From Vasiliy Kaptyukh and produced by {{AchievementTable}}:

Year Competition Venue Position Notes
Representing  Soviet Union
1985 European Junior Championships Cottbus, East Germany 3rd
1986 World Junior Championships Athens, Greece 3rd
1990 European Championships Split, Yugoslavia 4th 63.72 m
Representing  Belarus
1993 World Championships Stuttgart, Germany 7th 61.64 m
1995 World Championships Gothenburg, Sweden 3rd 65.88 m
IAAF Grand Prix Final Monte Carlo, Monaco 4th

Other similar examples can be found at Yvonne van Gennip, Masters Athletics World Records and Comparison of layout engines (Cascading Style Sheets)#Selectors.

Column headers: good example[edit]

The first solution where the table is split in several sub-tables.

Vasiliy Kaptyukh's achievements representing  Soviet Union
Year Competition Venue Position Notes
1985 European Junior Championships Cottbus, East Germany 3rd
1986 World Junior Championships Athens, Greece 3rd
1990 European Championships Split, Yugoslavia 4th 63.72 m
Vasiliy Kaptyukh's achievements representing  Belarus
Year Competition Venue Position Notes
1993 World Championships Stuttgart, Germany 7th 61.64 m
1995 World Championships Gothenburg, Sweden 3rd 65.88 m
IAAF Grand Prix Final Monte Carlo, Monaco 4th

Column headers in sortable tables: bad example[edit]

Example of a complex sortable table from list of Hot 100 number-one singles of the 2000s (U.S.):

# Reached number one Artist(s) Single Record label Weeks at
number one
Ref
2000
851 January 15, 2000 Christina Aguilera "What a Girl Wants" RCA 2 [ref]
852 January 29, 2000 Savage Garden "I Knew I Loved You" Columbia 4 [ref]
853 February 19, 2000 Mariah Carey & Joe & 98 Degrees "Thank God I Found You" Columbia 1 [ref]
2001
868 February 3, 2001 Shaggy & Ricardo 'Rikrok' Ducent "It Wasn't Me" MCA 2 [ref]
869 February 17, 2001 Outkast "Ms. Jackson" Arista 1 [ref]
870 February 24, 2001 Joe & Mystikal "Stutter" Jive 4 [ref]

Column headers in sortable tables: good example[edit]

In cases of long sortable tables, splitting the table would reduce its utility as a sortable table. A solution is to move the year headers ("2000", 2001", ...) to a dedicated column at the front of the table and make them spanned rows. It is tricky to explain, so please refer to the example below.

In the example, the first cell in the row is spanned across several rows. This spanned cell contains the year of the single, which is not the main subject of the row. The main subject of the row is in fact the name of the single. Thus, the first cell in the row should be a normal data cell instead of a row header.

Hot 100 number-one singles of the 2000s (U.S.)
Year # Reached number one Artist(s) Single Record label Weeks at
number one
Ref
2000 851 January 15, 2000 Christina Aguilera "What a Girl Wants" RCA 2 [ref]
852 January 29, 2000 Savage Garden "I Knew I Loved You" Columbia 4 [ref]
853 February 19, 2000 Mariah Carey & Joe & 98 Degrees "Thank God I Found You" Columbia 1 [ref]
2001 868 February 3, 2001 Shaggy & Ricardo 'Rikrok' Ducent "It Wasn't Me" MCA 2 [ref]
869 February 17, 2001 Outkast "Ms. Jackson" Arista 1 [ref]
870 February 24, 2001 Joe & Mystikal "Stutter" Jive 4 [ref]

Images and color[edit]

Note that colors and images with contrast conforming to accessibility requirements will print nicely in grayscale as an induced effect (among other benefits).

Images[edit]

  • Priority: high (accessibility level: A)
  • Difficulty: unknown (needs more testing and feedback for a precise rating)

Images inside a table should meet the general requirements in Wikipedia:Alternative text for images. However, small icons are the principal case encountered in a table. They fall into two categories:

  1. icons of symbols ought to have minimal alt text that conveys the same information as the icon (example: if increase indicates an increase it has |alt=increase);
  2. decorative icons (icons carrying no information or associated with a text providing similar information) need to be unlinked and have an empty alt text (|link=|alt=). When they are not able to be unlinked, a minimal alt text will suffice.

Note that images in headers can be particularly annoying for screen reader users if they are badly handled. If the image does not comply with the above criteria, the filename will be part of the header title. The filename will be read aloud in every cell under the header containing the icon. The alt text will also be repeated like the filename, which can also be a nuisance if it is irrelevant to the subject or is too long.

Color[edit]

  • Priority: high (accessibility level: A)
  • Difficulty: medium (needs testing and feedback for a precise rating)

Colors inside a table should meet the requirements for color. Color contrast – measured by the free Color Contrast Analyser – needs to be sufficient. Also, information should not be conveyed by color alone. Information should also be available textually. A footnote or a textual sign[note 5] can also be used to show a cell has a particular meaning.

Bad uses of color[edit]

From Fiscal calendar#Chart of Different Fiscal Years:

By Country
Country Purpose J F M A M J J A S O N D J F M A M J J A S O N D
Australia
Canada

Good uses of color[edit]

Note: This is an example of using color rather than of providing accessible tables. Having the table caption in a table header instead produces a non-accessible table. As of September 2010, this table header is necessary for the collapsible script to work. Until the script is improved we should continue to use this syntax.

Legend: cells marked with "x" are included in the fiscal year.

Fiscal years by country
Country Purpose J F M A M J J A S O N D J F M A M J J A S O N D
Australia x x x x x x x x x x x x
Canada x x x x x x x x x x x x
Fiscal years by country
Country Purpose J F M A M J J A S O N D J F M A M J J A S O N D
Australia 1st of July to 30th of June
Canada 1st of April to 31st of March

From Dwain Chambers (with improved table caption and structure; but the original use of color is good):

Dwain Chambers competition record
Competition Year Venue Position Event Notes
European Championships 1998 Budapest, Hungary 2nd 100 metres
IAAF World Cup Johannesburg, South Africa 3rd 100 metres
Commonwealth Games Kuala Lumpur, Malaysia 1st 4×100 metres relay
European Cup 1999 Paris, France 1st 100 metres
IAAF World Championships Seville, Spain 3rd 100 metres
2nd 4×100 metres relay


Avoiding nested data tables[edit]

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

Nested tables are very confusing for screen reader users, as explained below. Thus, they should be avoided.

Visitors using screen readers and Braille displays can chug through pages one word after another or navigate from one “item” to another, where “items” are defined by HTML markup. The commands to move through the items on a page vary from system to system, but we will model this process as akin to pressing the Tab key.

You can tab to a table and tab within a table. And here is where the problem starts. For simple layout tables not nested within other tables, it is no problem to move from cell to cell. With nested tables, though, a screen-reader user ends up working from within a maze formed by one table inside another.

Where a sighted visitor would appreciate the net appearance of all the nested tables put together, a screen-reader user navigates the underlying structure. As you know from attempting to code nested tables, the structure is damnably difficult to figure out. Now try reverse-engineering that structure via speech output.

In effect, by using nested tables, you conscript blind visitors into debugging the coding of your page by audio alone.
—Joe Clark, Tables and frames, joeclark.org[2]

Bad example of nested data tables[edit]

See inclusions of Template:CompactTable, in Basketball at the 2000 Summer Olympics for example.

Resources[edit]

Additional information can be found at Data tables tutorial/Internal guidelines‎‎. However, this guideline is not meant to be enforced, and only serves as a resource for members of WikiProject Accessibility.

These are examples of tables read aloud by screen readers. They may be useful as concrete examples to show to the community, when the community has difficulty in understanding how an accessible table benefits a screen reader user.

Footnotes[edit]

Notes[edit]

  1. ^ This page was reviewed by fr:user:Lgd, an accessibility expert from the French Wikipedia, in September 2010. Any other review by an expert is welcome, if someone has a concern about a guideline. For example, WebAIM experts can be contacted.
  2. ^ See HTML5 differences from HTML4, 3.6 Absent Attributes: "scope attribute on td" will be deprecated in HTML 5. To prepare for the change we should use solely scope attribute on th.
  3. ^ See the discussions at MediaWiki talk:Common.css some wikitable ideas and bold row headers.
  4. ^ Or <caption>, but wikisyntax should be preferred in articles.
  5. ^ But avoid Unicode characters, per Wikipedia:Manual of Style (accessibility)#Text. See also Graham87's explanation in the context of a featured list candidate.

References[edit]

  1. ^ Table cells: The TH and TD elements, W3C
  2. ^ Tables and frames, joeclark.org. Note: this source is outdated, but the part concerning nested tables is still valid as of October 2010.

WCAG references[edit]

  1. ^ a b H39: Using caption elements to associate data table captions with data tables, accessibility level: A.
  2. ^ H51: Using table markup to present tabular information
  3. ^ H63: Using the scope attribute to associate header cells and data cells in data tables, accessibility level: A