Wikipedia:Manual of Style/Accessibility/Data tables tutorial

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 table captions (table header)

Status: Complete. Needs to be reviewed by an accessibility expert.

Priority: high (A accessibility level)
Difficulty: easy (blend in nicely with editorial habits)

A data table needs a table caption that roughly describes what the the table is about.^{[WCAG-TECH 1]} It is to a table what a section header is to a paragraph. Table captions are made with "|+".^{[note 1]} Example from Tobin Bell#Filmography:

List of Television appearances and roles
Title	Year	Role	Notes
The Equalizer	1988		Episode: "The Day of the Covenant"
Perfect Witness	1989	Dillon	TV film
Alien Nation	1990	Brian Knox	Episode: "Crossing the Line"

A table caption is required unless it is directly preceded by a short paragraph or a section header playing the same role. Table captions consisting of one single word like "actor", "film" or "television" are no good as they are not descriptive enough.

Correct headers structure

Status: under construction

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

^{[WCAG-TECH 2]} H51: Using table markup to present tabular information and H63: Using the scope attribute to associate header cells and data cells in data tables

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

Status: under construction 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:

a minimal alt text (|alt= ...);
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.

Avoiding nested tables

Status: under construction

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

Providing abbreviations for long headers

Status: under construction

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

Status: under construction

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].

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

Converting timelines into data tables

Priority: high (A accessibility level, since <timeline> and images of timelines are hard to make accessible due to limitations in MediaWiki) Difficulty: hard (Fairly good skills are needed to make a table out of complex timelines, and even more skill is needed to make it accessible. Although if you feel confident about it do not hesitate for a second: it will improve accessibility greatly.)

File:RHCP Members by Year.png and Wikipedia_talk:Manual_of_Style_(accessibility)#Question regarding timeline

timelines visualizer (almaghi)

Providing a summary

Priority: high (A accessibility level)
Difficulty: very hard (Same issue with alt texts for images containing a lot of information (charts, etc.): it takes a lot of time to write, and the user doesn't have the slightest idea what to write in it. They don't benefit from it, so it doesn't blend in with editorial practices at all. Table summaries should not be encouraged in Wikipedia because they will be misused.)

Example of mistake (from this diff)

{| class="wikitable sortable" summary="List of Television appearances and roles"
|+ Television

Good example:

<table summary="Schedule for Route 7 going downtown. Service begins 
at 4:00 AM and ends at midnight. Intersections are listed in the top row. 
Find the intersection closest to your starting point or destination, then read 
down that column to find out what time the bus leaves that intersection.">
  <tr>
    <th scope="col">State & First</th>
    <th scope="col">State & Sixth</th>
    <th scope="col">State & Fifteenth</th>
    <th scope="col">Fifteenth & Morrison</th>
  </tr>
    <td>4:00</td>
    <td>4:05</td>
    <td>4:11</td>
    <td>4:19</td>
  </tr>
  …
</table>

H73: Using the summary attribute of the table element to give an overview of data tables

Avoiding rowspan/colpan

Priority: bonus (this criterion is not part of any accessibility referential and has limited impact)
Difficulty: very hard (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).

Issues with sortable tables

This is only meant to provide information. No action should be taken upon the content of this section.

L'utilisation des modèles {{Smn}} et {{Tri}} génère dans le tableau des données masquées fournissant des clés de tri différentes des données affichées dans le tableau. Ces clés de tri étant un contenu HTML simplement masqué dans chaque cellule concernée et non une métadonnée^{[WCAG-TECH 3]}, elles rendent incompréhensible leur contenu pour les utilisateurs chez qui les styles CSS ne sont pas pris en compte ou sont désactivés.

Exemple de tableau triable utilisant le modèle {{Smn}}
Rendu affiché avec CSS	Contenu réel de la cellule de tableau restitué si les styles CSS ne sont pas pris en compte
Template:Smn €	-4715 !-47,15 €

Couldn't think of a title

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

Resources

Table using SCOPE attributes (NVDA using the Crystal voice from NaturalSoft): http://bennett1.org/j15/accessibility/at-testing/tst-sr/tables-screen-readers/169-scope-equals

Table using ID attribute (NVDA using the default eSpeak voice): http://bennett1.org/j15/accessibility/at-testing/tst-sr/tables-screen-readers/171-tables-using-id-attribute

Footnotes

Notes

^ Or <caption>, but wikisyntax should be preferred in articles.

References

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

WCAG references

^ Using caption elements to associate data table captions with data tables, A accessibility level.
^ Using the scope attribute to associate header cells and data cells in data tables, A accessibility level
^ G115: Using semantic elements to mark up structure, niveau d'accessibilité A

[2] Or <caption>, but wikisyntax should be preferred in articles.

[4] ttp://www.w3.org/TR/WCAG10-HTML-TECHS/#identifying-table-rows-columns

[5] Associating header information with data cells, W3C

[6] Avoid Tables with More than Two Levels of Row and/or Column Headers, Creating Accessible Tables, 2. Data Tables, WebAiM

[1] Using caption elements to associate data table captions with data tables, A accessibility level.

[3] Using the scope attribute to associate header cells and data cells in data tables, A accessibility level

[7] G115: Using semantic elements to mark up structure, niveau d'accessibilité A

[WCAG-TECH 1]

[note 1]

[WCAG-TECH 2]

[1]

[2]

[3]

[WCAG-TECH 3]