Wikipedia:Manual of Style/Accessibility/Data tables tutorial: Difference between revisions

Revision as of 07:45, 12 December 2021

Latest revision as of 14:55, 21 April 2025

(45 intermediate revisions by 13 users not shown)

Line 1:

{{Wikipedia how-to|interprets=Wikipedia:Manual of Style/Accessibility|WP:DTT|MOS:DTT|WP:DTABTUT|MOS:DTABTUT|MOS:DATATABLES}}

{{Style|content}}

{{Wikipedia:WikiProject Accessibility/Navigation menu|articles}}

This tutorial is a guideline which, as part of Wikipedia's [[WP:MOS|Manual of Style]], is intended to assist those creating data tables (or more often [[Wikipedia:Manual of Style/Lists|lists]]) in ensuring the content is [[Web accessibility|accessible to all]]. For more info on how to create and edit tables, see [[Help:Table]].

Guidelines on this page are ordered primarily by priority, then difficulty. The priority levels are determined by the Accessibility Success Criteria rankings A, AA, and AAA (in descending order of importance as accessibility considerations) of the [[World Wide Web Consortium]] (W3C) [[WCAG 2.0|Web Content Accessibility Guidelines (WCAG) 2.0]].<ref group="WCAG" name="WCAG2.0">{{cite web |title=Web Content Accessibility Guidelines 2.0 |date=5 May 1999 |work=W3.org |publisher=World Wide Web Consortium (W3C)|___location=Cambridge, Massachusetts |author=Web Accessibility Initiative |editor1-first=Wendy|editor1-last=Chisholm |editor2-first=John|editor2-last=Slatin |editor3-first=Jason |editor3-last=White |url= http://www.w3.org/TR/WAI-WEBCONTENT/ |accessdate=11 December 2008}} Confusingly, the WCAG 2.0's rankings A, AA (or Double-A), and AAA (Triple-A) are used for two different but interrelated concepts, the second of which may be counter-intuitive:<ol type="A"><li>The one used in this Wikipedia guideline &ndash; the relative importance of a particular "Success Criterion" at achieving accessibility, in which A is the most essential or impactful, and AAA represents less urgent accessibility allowances a site should make, with AA being of medium urgency. Each criterion is explained at a "How to Meet" link in the section in WCAG 2.0 for each of its accessibility recommendations, and collected at [http://www.w3.org/WAI/WCAG20/quickref/ "How to Meet WCAG 2.0: A customizable quick reference"]</li><li>The compliance level of a website, with "A" representing the minimum level of conformance to the accessibility recommendations, and "AAA" being the most accessible, meeting all Level A, AA, and AAA Success Criteria. Thus, "Level AAA Compliance" means the {{em|opposite}} of "only compliant with Level AAA Success Criteria". Wikipedia naturally strives for Level AAA Compliance, prioritizing on proceeding from A to AA to AAA compliance to meet the most essential accessibility requirements the soonest, where practical.</li></ol>

The present system replaces the 1999 [http://www.w3.org/TR/WCAG10/ WCAG 1.0] system of Conformance Levels (also A, AA, and AAA) with a [http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html checklist] of Priority 1, 2, and 3 recommendations; while those roughly correspond to the current A, AA, and AAA success levels, 2.0 has added many criteria that were not present in 1.0. See [http://www.w3.org/WAI/WCAG20/from10/diff.php "How WCAG 2.0 Differs from WCAG 1.0"]</ref> The ''{{em|difficulty''}} indicates if it seems easy or not for Wikipedia users to comply to the guidelines.

Guidelines here essentially follow WCAG 2.0's approach, and some additional reputable 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.<ref group="note">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.</ref>

Line 12:

== Overview of basics ==

* Priority: high (accessibility level: A)

* Difficulty: easy (the syntax is fairly simple and editors get used to it; the layout might change users' habits)

===Table style===

<pre>

<div style="display: inline-table;">

'''Wikitext:'''

<syntaxhighlight lang="wikitext">

{| class="wikitable"

|+ caption text

Line 28 ⟶ 31:

! scope="row" | row header 2

| data 3 || data 4

...

|}

</syntaxhighlight>

</pre>

</div>

which gives:

<div style="display: inline-table;">

'''Produces:'''

{| class="wikitable"

|+ caption text

Line 45 ⟶ 50:

| data 3 || data 4

|}

</div>

;==== Caption ( <code>|+</code> ): ====
A caption is a table's title, describing its nature.<ref name="H39" group="WCAG">[http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H39 "H39: Using caption elements to associate data table captions with data tables"], accessibility level: A.</ref>

====Row and column headers (<code> ! </code>)====

; Row and column headers (<code> ! </code>): Like the caption, these help present the information in a logical structure to visitors.<ref group="WCAG">[http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H51 "H51: Using table markup to present tabular information"]</ref> 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.<ref>[http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TH Table cells: The TH and TD elements], W3C</ref>

Like the caption, these help present the information in a logical structure to visitors.<ref group="WCAG">[http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H51 "H51: Using table markup to present tabular information"]</ref> 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.<ref>[http://www.w3.org/TR/REC-html40/struct/tables.html#edef-TH Table cells: The TH and TD elements], W3C</ref>

; Scope of headers (<code>scope="col"</code> and <code>scope="row"</code>): This clearly identifies headers as either column headers or row headers respectively.<ref group="note">See [http://www.w3.org/TR/html5-diff/#absent-attributes HTML5 differences from HTML4, 3.6 Absent Attributes]: "<code>scope</code> attribute on <code>td</code>" will be deprecated in HTML 5. To prepare for the change we should use solely <code>scope</code> attribute on <code>th</code>.</ref><ref name="H63" group="WCAG">[http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H63.html "H63: Using the scope attribute to associate header cells and data cells in data tables"], accessibility level: A</ref>

====Scope of headers (<code>scope="col"</code> and <code>scope="row"</code>)====

This clearly identifies headers as either column headers or row headers respectively.<ref group="note">See [http://www.w3.org/TR/html5-diff/#absent-attributes HTML5 differences from HTML4, 3.6 Absent Attributes]: "<code>scope</code> attribute on <code>td</code>" will be deprecated in HTML 5. To prepare for the change we should use solely <code>scope</code> attribute on <code>th</code>.</ref><ref name="H63" group="WCAG">[http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H63.html "H63: Using the scope attribute to associate header cells and data cells in data tables"], accessibility level: A</ref>

=== Layout of table headers ===

As can be seen in the example above, row headers are formatted by default as bold, centredcentered and with a darker background. This is the common behavior across the Internet, and the default rendering in most browsers. In some circumstances it might be desirable to apply a style customized for a specific case. The class <code>plainrowheaders</code> will apply left-aligned and normal-weight formatting so that editors do not feel the need to override the header formatting with inline CSS declarations for each cell.<ref group="note">See the discussions at MediaWiki talk:Common.css [//en.wikipedia.org/w/index.php?title=MediaWiki_talk:Common.css&diff=prev&oldid=395578619#some_wikitable_ideas some wikitable ideas] and [//en.wikipedia.org/w/index.php?title=MediaWiki_talk:Common.css&diff=prev&oldid=395578619#Bold_row_headers bold row headers].</ref> Used by itself, <code>plainrowheaders</code> will make headers appear similar to unmodified data cells, except for the darker background.

To use <code>plainrowheaders</code>, place it (like <code>wikitable</code>) in the <code>class=</code> attribute at the beginning of the table. The example below shows customan unbolded, left-aligned row header style usingwith a custom larger font instead of boldfacingstyle:

<pre>

<div style="display: inline-table;">

'''Wikitext:'''

<syntaxhighlight lang="wikitext">

{| class="wikitable plainrowheaders"

|-

! scope="row" style="font-size: larger;" | [row header 1]

! scope="col" | column header 1

</pre>

! scope="col" | column header 2

|-

! scope="row" style="font-size: larger;" | row header

| data

|}

</syntaxhighlight>

</div>

<div style="display: inline-table;">

'''Produces:'''

{| class="wikitable plainrowheaders"

|-

! scope="col" | column header 1

! scope="col" | column header 2

|-

! scope="row" style="font-size: larger;" | row header

| data

|}

</div>

== Proper table captions and summaries ==

Line 64 ⟶ 95:

Table markup provides for both ''captions'' and ''summaries'', both of great utility for making tables accessible. The caption provides a descriptive heading for the table and the summary provides a "nutshell" of its content. If you like, you can think of them as analogous, respectively, to a journal paper's title and its abstract.

=== Caption ===

* Priority: high (accessibility level: A)

* Difficulty: easy (the syntax is fairly simple and already in use; the layout slightly changes users' habits)

All data tables need a table ''caption'' that succinctly describes what the table is about.<ref name="H39" group="WCAG" /> It plays the role of a table heading, and is recommended as a best practice.<ref name="WebAccessibility 415">{{cite web |title=Ensure table captions are provided explicitly |at="Best Practices" section |author=<!--Staff writer(s); no by-line.--> |work=Accessibility Management Platform (AMP) |year=2015 |publisher=SSB BART Group |___location=San Francisco, California |url= https://www.webaccessibility.com/best_practices.php?best_practice_id=415 |accessdate=13 July 2015}} GSA Schedule 70. Cites multiple standards besides WCAG, including: JIS X 8341-3: 2004 - Technical Standards Subpart 5; KWCAG; 47 CFR 14. Advanced Communication Services, §14.21 Performance Objectives; HHS HTML 508 Checklist; and US Telecommunications Act Accessibility Guidelines 1193.41&ndash;43.</ref> You would usually need some kind of heading or description introducing a new table anyway, and this is what the caption feature exists for. Table captions are made with <code>|+</code>.<ref group="note" name="cap and sum">Table captions can also be made with {{tag|caption|content={{var|Caption here}}}}, and summaries with {{tag|table|o|params=summary="{{var|Summary text here.}}"}}, but wikisyntaxwiki syntax should be preferred in articles.</ref> A caption can be styled with CSS, and may include wikilinks, reference citations, etc. It may be explicitly put to the left like other Wikipedia headings with <code>style="text-align: left;"</code> (a good idea especially on wide tables). Captions are not used for layout tables (these are deprecated on Wikipedia as well as more broadly, but some editors temporarily resort to them until later editors wikicode whatever it was they were trying to achieve.)

A temporary case for not using the <code>|+</code> caption is in certain situations when using a [[Help:Table/Advanced#Collapsible tables|collapsible table]]. {{As of|2010|09}}, the {{nowrap|"[hide]" / "[show]"}} collapse control has to be inside a table header (until the collapsibility script is improved), and it must be large enough to contain it. If the table has no header, or only a very small header, a common solution has been to put the caption text in a table header to which the collapse controller may attach.{{clarify|date=July 2015|reason=Has this problem been resolved yet? It's been almost 5 years.}}

Example of a proper caption from [[Special:PermanentLink/3836729671272858269#FilmographyTelevision|Tobin Bell#FilmographyCredits]]:

{| class="wikitable sortable plainrowheaders"

|+ List of Bell's television appearances and roles

|-

! scope="col" | Title

! scope="col" | Year

! scope="col" | Title

! scope="col" | Role

! scope="col" class="unsortable" | Notes

|-

| 1987–1988

! scope="row" | ''{{sortname|The|Equalizer}}''

! scope="row" | ''{{sortname|The|Equalizer|The Equalizer (1985 TV series)}}''

| 1988

| {{hlist|Cronin/Weber<!--Actual Screen Cred from "Mission: McCall", verbatim (One is an Alias)-->, Deputy Secretary<!--Day of the Covenant-->}}

|

| Episode{{ubl|Episodes: "[[ListThe ofEqualizer (1985 TV series) season 3#ep50|Mission: McCall: Part 1]]", "[[The Equalizer episodes#Season(1985 fourTV series) season 3#ep51|Mission: McCall: Part 2]]", "[[The Equalizer (1985 TV series) season 4#ep71|Day of the Covenant]]"}}

|-

! scope="row" | ''Perfect Witness''

| 1989

! scope="row" | ''[[Perfect Witness]]''

| Dillon

| [[TVTelevision film]]

|-

! scope="row" | ''[[Alien Nation (1989 TV series)|Alien Nation]]''

| 1990

! scope="row" | ''[[Alien Nation (TV series)|Alien Nation]]''

| Brian Knox

| Brian Knox / Dr. Death

| Episode: "Crossing the Line"

| Episode: "[[Alien Nation (TV series)#ep18|Crossing the Line]]"

|}

Line 102 ⟶ 133:

== Avoiding column headers in the middle of the table ==

{{Shortcut|MOS:COLHEAD}}

* 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. AssistiveFor technologiesexample, willa getscreen confusedreader asreading theythe cannotcell know"Stuttgart, whichGermany" previousmight associate the cell with the following headers: still"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 partsthe lower half of the table, afterand 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 firsttable structure to the oneuser.{{dubious}}

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

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 (second example).

=== Column headers: bad example ===

From [[Special:Redirect/revision/en.wikipedia.org/w/index.php?title=Vasiliy_Kaptyukh&oldid=366653030 |Vasiliy Kaptyukh]] and produced by {{t|AchievementTable}}:

{| class="wikitable" style=" text-align: center; font-size: 95%;" width="80%"

|-

! Year

! Competition

! Venue

! Position

! Notes

|-

! colspan="5" | Representing {{URS}}

|-

| 1985

| [[1985 European Athletics Junior Championships|European Junior Championships]]

| [[Cottbus]], [[East Germany]]

|bgcolor style="background-color: #cc9966;" | 3rd

|

|-

| 1986

| [[1986 World Junior Championships in Athletics|World Junior Championships]]

| [[Athens, Greece]]

|bgcolor style="CC9966background-color: #cc9966;" | 3rd

|

|-

| 1990

| [[1990 European Championships in Athletics|European Championships]]

| [[Split (city)|Split]], [[Yugoslavia]]

| 4th

| [[1990 European Athletics Championships – Men's discus throw|63.72 m]]

|-

! colspan="5" | Representing {{BLR}}

|-

| 1993

| [[1993 World Championships in Athletics|World Championships]]

| [[Stuttgart, Germany]]

| 7th

| [[1993 World Championships in Athletics – Men's discus throw|61.64 m]]

|-

| rowspan="2" | 1995

| [[1995 World Championships in Athletics|World Championships]]

| [[Gothenburg]], [[Sweden]]

|bgcolor style="CC9966background-color: #cc9966;" | 3rd

| [[1995 World Championships in Athletics – Men's discus throw|65.88 m]]

|-

| [[1995 IAAF Grand Prix Final|IAAF Grand Prix Final]]

| [[Monte Carlo]], Monaco

| 4th

|

|}

Line 164 ⟶ 193:

=== Column headers: good example 1 ===

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

{| class="wikitable" style="text-align: center;"

|+ Vasiliy Kaptyukh's achievements representing {{URS}}

! scope="col" | Competition

Line 172 ⟶ 201:

! scope="col" | Notes

|-

! scope="row" | [[1985 European Athletics Junior Championships|European Junior Championships]]

| 1985

| [[Cottbus]], [[East Germany]]

| style="background-color: #cc9966;" | 3rd

|

|-

! scope="row" | [[1986 World Junior Championships in Athletics|World Junior Championships]]

| 1986

| [[Athens, Greece]]

| style="background-color: #CC9966cc9966;" | 3rd

|

|-

! scope="row" | [[1990 European Championships in Athletics|European Championships]]

| 1990

| [[Split (city)|Split]], [[Yugoslavia]]

| 4th

| [[1990 European Athletics Championships – Men's discus throw|63.72 m]]

|}

{| class="wikitable" style="text-align: center;"

|+ Vasiliy Kaptyukh's achievements representing {{BLR}}

! scope="col" | Competition

Line 199 ⟶ 228:

! scope="col" | Notes

|-

! scope="row" | [[1993 World Championships in Athletics|World Championships]]

| 1993

| [[Stuttgart, Germany]]

| 7th

| [[1993 World Championships in Athletics – Men's discus throw|61.64 m]]

|-

! scope="row" | [[1995 World Championships in Athletics|World Championships]]

| rowspan="2" | 1995

| [[Gothenburg]], [[Sweden]]

| style="background-color: #CC9966cc9966;" | 3rd

| [[1995 World Championships in Athletics – Men's discus throw|65.88 m]]

|-

! scope="row" | [[1995 IAAF Grand Prix Final|IAAF Grand Prix Final]]

| [[Monte Carlo]], Monaco

| 4th

|

|}

Line 220 ⟶ 249:

An alternative which takes a bit more time to implement is to add a column for the representation.

{| class="wikitable" style="text-align: center;"

|+ Vasiliy Kaptyukh's achievements

! scope="col" | Competition

Line 229 ⟶ 258:

! scope="col" | Notes

|-

! scope="row" | [[1985 European Athletics Junior Championships|European Junior Championships]]

| 1985

| {{URS}}

| [[Cottbus]], [[East Germany]]

| style="background-color: #cc9966;" | 3rd

|

|-

! scope="row" | [[1986 World Junior Championships in Athletics|World Junior Championships]]

| 1986

| {{URS}}

| [[Athens, Greece]]

| style="background-color: #CC9966cc9966;" | 3rd

|

|-

! scope="row" | [[1990 European Championships in Athletics|European Championships]]

| 1990

| {{URS}}

| [[Split (city)|Split]], [[Yugoslavia]]

| 4th

| [[1990 European Athletics Championships – Men's discus throw|63.72 m]]

|-

! scope="row" | [[1993 World Championships in Athletics|World Championships]]

| 1993

| {{BLR}}

| [[Stuttgart, Germany]]

| 7th

| [[1993 World Championships in Athletics – Men's discus throw|61.64 m]]

|-

! scope="row" | [[1995 World Championships in Athletics|World Championships]]

|rowspan=2| 1995

| {{BLR}}

| [[Gothenburg]], [[Sweden]]

| style="background-color: #CC9966cc9966;" | 3rd

| [[1995 World Championships in Athletics – Men's discus throw|65.88 m]]

|-

! scope="row" |[[1995 IAAF Grand Prix Final|IAAF Grand Prix Final]]

| 1995

| {{BLR}}

| [[Monte Carlo]], Monaco

| 4th

|

|}

== Complex tables ==

In contrast with simple tables, which only have headers spanning one column (<code>! scope="col" | </code>) or one row (<code>! scope="row" | </code>), some headers may span multiple columns or rows with the use of the <code>colspan</code> or <code>rowspan</code> attributes. To clearly define relationships and avoid accessibility issues, use <code>! scope="colgroup" colspan="2" | </code> when a column header spans two columns and <code>! scope="rowgroup" rowspan="2" | </code> when a row header spans two rows, adjusting the number if spanning more.<ref name="H63" group="WCAG"/>

In contrast with simple tables which only have one or two levels of headers, complex tables have more than two. Most likely you will only need up to four levels of headers. Anything more than that should probably be split into a separate table.

<div style="display: inline-table;">

When a header spans two columns or rows, use <code>! scope="colgroup" colspan"2" | </code> or <code>! scope="rowgroup" rowspan"2" | </code> respectively to clearly identify the header as a column header of two columns or a row header of two rows.<ref name="H63" group="WCAG"/>

'''Wikitext:'''

<syntaxhighlight lang="wikitext">

{| class="wikitable"

|-

! scope="col" rowspan="2" | column header 1

! scope="col" rowspan="2" | column header 2

! scope="colgroup" colspan="2" | column header group

|-

! scope="col" | column header 3

! scope="col" | column header 4

|-

! scope="rowgroup" rowspan="2" | row header group

! scope="row" | row header 1

| data || data

|-

! scope="row" | row header 2

| data || data

|-

! scope="row" colspan="2" | row header 3

| data || data

|}

</syntaxhighlight>

</div>

<div style="display: inline-table;">

When headers aren't clear and you cannot split the table into simpler tables per recommendations, this can cause accessibility issues; therefore, you have to associate each cell to their respective header(s) using '''id''' on the headers and '''headers''' on their respective data cells (e.g. <code>! scope="col" id="abc" | abc</code> and <code>| headers="abc" | 123</code>). Each id should have a value that is unique to that table without spaces. If a cell belongs to multiple headers, list the header ids separated by spaces in the order in which 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>

'''Produces:'''

{| class="wikitable"

|-

! scope="col" rowspan="2" | column header 1

! scope="col" rowspan="2" | column header 2

! scope="colgroup" colspan="2" | column header group

|-

! scope="col" | column header 3

! scope="col" | column header 4

|-

! scope="rowgroup" rowspan="2" | row header group

! scope="row" | row header 1

| data || data

|-

! scope="row" | row header 2

| data || data

|-

! scope="row" colspan="2" | row header 3

| data || data

|}

</div>

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 clear. Look at the source code of this section to see how each cell's id and headers are defined.

Below is an example of a complex table with headers that aren't visually clear, but uses <code>id</code> and <code>headers</code> instead of <code>scope</code> to associate column and row headers to individual cells. Again, it is recommended to simplify the table so headers are visually clear by splitting it into a "d" and "e" table if possible where the text in the "d" and "e" cells are moved to each table's caption.

<div style="display: inline-table;">

'''Wikitext:'''

<syntaxhighlight lang="wikitext">

{| class="wikitable"

|-

! id="a" | a

! id="b" | b

! id="c" | c

|-

! colspan="3" id="d" | d

|-

! id="w" headers="d a" | w (d a)

| headers="d b w" | d b w

| headers="d c w" | d c w

|-

! id="x" headers="d a" | x (d a)

| headers="d b x" | d b x

| headers="d c x" | d c x

|-

! colspan="3" id="e" | e

|-

! id="y" headers="e a" | y (e a)

| headers="e b y" | e b y

| headers="e c y" | e c y

|-

! id="z" headers="e a" | z (e a)

| headers="e b z" | e b z

| headers="e c z" | e c z

|}

</syntaxhighlight>

</div>

<div style="display: inline-table;">

'''Produces:'''

{| class="wikitable"

|-

! id="a" | a

|

! scope="col" id="ab" | ab

! scope="col" id="bc" | bc

|-

! scope="colgroup" colspan="3" id="cd" | cd

|-

! scope="row" id="w" headers="cd a" | w (cd a)

| headers="ad cb w" | ad cb w

| headers="bd c w" | bd c w

|-

! scope="row" id="x" headers="cd a" | x (cd a)

| headers="ad cb x" | ad cb x

| headers="bd c x" | bd c x

|-

! scope="colgroup" colspan="3" id="de" | de

|-

! scope="row" id="y" headers="de a" | y (de a)

| headers="ae db y" | ae db y

| headers="be dc y" | be dc y

|-

! scope="row" id="z" headers="de a" | z (de a)

| headers="ae db z" | ae db z

| headers="be dc z" | be dc z

|}

</div>

== Images and color ==

Line 312 ⟶ 423:

=== Images ===

* 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:

Line 322 ⟶ 433:

=== Color ===

* Priority: high (accessibility level: A)

* Difficulty: medium (needs testing and feedback for a precise rating)

Colors inside a table should meet the requirements for [[Wikipedia:Manual of Style (accessibility)#Color|color]].

* Color contrast – measured by the free [https://www.paciellogroup.com/resources/contrastanalyser/ Color Contrast Analyser] – needs to be sufficient.

* A very simple tool that can be helpful for choosing contrasting colours is [https://colororacle.org/ Color Oracle], a "free color blindness simulator for Windows, Mac and Linux".

But more importantly, information should not be conveyed by color alone. Information should also be available textually. A footnote or a textual sign<ref group="note">But avoid [[Unicode]] characters, per [[Wikipedia:Manual of Style (accessibility)#Text]]. See also [//en.wikipedia.org/w/index.php?title=User_talk:Bamse&diff=385470117&oldid=385349107 Graham87's explanation] in the context of a [//en.wikipedia.org/w/index.php?title=Wikipedia%3AFeatured_list_candidates%2FList_of_National_Treasures_of_Japan_%28crafts%3A_swords%29%2Farchive1&action=historysubmit&diff=385510315&oldid=385430878 featured list candidate.]</ref> can also be used to show a cell has a particular meaning.

==== Bad uses of color ====

From [//en.wikipedia.org/w/index.php?title=Fiscal_year&oldid=384026890#Chart_of_Different_Fiscal_Years Fiscal calendar#Chart of Different Fiscal Years]:

{| class="wikitable collapsible" style="width: 100%;"

|+ By Countrycountry

|-

! width="100px" | Country

! width="100px" | Purpose

! width="20px" | J

! width="20px" | F

! width="20px" | M

! width="20px" | A

! width="20px" | M

! width="20px" | J

! width="20px" | J

! width="20px" | A

! width="20px" | S

! width="20px" | O

! width="20px" | N

! width="20px" | D

! width="20px" | J

! width="20px" | F

! width="20px" | M

! width="20px" | A

! width="20px" | M

! width="20px" | J

! width="20px" | J

! width="20px" | A

! width="20px" | S

! width="20px" | O

! width="20px" | N

! width="20px" | D

|-

| colspan="2" | [[Australia]]

|

|

Line 372 ⟶ 482:

|

|

| colspan="12" style="background: #ABCDEFabcdef;" |

|

|

Line 379 ⟶ 489:

|

|

|-

| colspan="2" | [[Canada]]

|

|

|

| colspan="12" style="background: #ABCDEFabcdef;" |

|

|

Line 401 ⟶ 511:

Legend: cells marked with "{{chk}}" are included in the fiscal year.

{| class="wikitable collapsible" style="width: 100%;"

|+ Fiscal years by country

|-

! scope="col" widthstyle=100px"width: 14%;" | Country

! scope="col" widthstyle=100px"width: 14%;" | Purpose

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|J|January}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|F|February}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|M|March}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|A|April}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|M|May}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|J|June}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|J|July}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|A|August}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|S|September}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|O|October}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|N|November}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|D|December}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|J|January}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|F|February}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|M|March}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|A|April}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|M|May}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|J|June}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|J|July}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|A|August}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|S|September}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|O|October}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|N|November}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|D|December}}

|-

! scope="row" | [[Australia]]

|

Line 439 ⟶ 549:

|

|

| style="background: #ABCDEFabcdef; text-align: center;" | {{chk}}

| style="background: #ABCDEFabcdef; text-align: center;" | {{chk}}

| style="background: #ABCDEFabcdef; text-align: center;" | {{chk}}

| style="background: #ABCDEFabcdef; text-align: center;" | {{chk}}

| style="background: #ABCDEFabcdef; text-align: center;" | {{chk}}

| style="background: #ABCDEFabcdef; text-align: center;" | {{chk}}

| style="background: #ABCDEFabcdef; text-align: center;" | {{chk}}

| style="background: #ABCDEFabcdef; text-align: center;" | {{chk}}

| style="background: #ABCDEFabcdef; text-align: center;" | {{chk}}

| style="background: #ABCDEFabcdef; text-align: center;" | {{chk}}

| style="background: #ABCDEFabcdef; text-align: center;" | {{chk}}

| style="background: #ABCDEFabcdef; text-align: center;" | {{chk}}

|

|

Line 457 ⟶ 567:

|

|

|-

! scope="row" | [[Canada]]

|

Line 463 ⟶ 573:

|

|

| style="background: #ABCDEFabcdef; text-align: center;" | {{chk}}

| style="background: #ABCDEFabcdef; text-align: center;" | {{chk}}

| style="background: #ABCDEFabcdef; text-align: center;" | {{chk}}

| style="background: #ABCDEFabcdef; text-align: center;" | {{chk}}

| style="background: #ABCDEFabcdef; text-align: center;" | {{chk}}

| style="background: #ABCDEFabcdef; text-align: center;" | {{chk}}

| style="background: #ABCDEFabcdef; text-align: center;" | {{chk}}

| style="background: #ABCDEFabcdef; text-align: center;" | {{chk}}

| style="background: #ABCDEFabcdef; text-align: center;" | {{chk}}

| style="background: #ABCDEFabcdef; text-align: center;" | {{chk}}

| style="background: #ABCDEFabcdef; text-align: center;" | {{chk}}

| style="background: #ABCDEFabcdef; text-align: center;" | {{chk}}

|

|

Line 486 ⟶ 596:

|}

{| class="wikitable collapsible" style="width: 100%;"

|+ Fiscal years by country

|-

! scope="col" widthstyle=100px"width: 14%;" | Country

! scope="col" widthstyle=100px"width: 14%;" | Purpose

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|J|January}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|F|February}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|M|March}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|A|April}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|M|May}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|J|June}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|J|July}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|A|August}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|S|September}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|O|October}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|N|November}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|D|December}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|J|January}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|F|February}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|M|March}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|A|April}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|M|May}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|J|June}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|J|July}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|A|August}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|S|September}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|O|October}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|N|November}}

! scope="col" widthstyle=20px"width: 3%;" | {{abbr|D|December}}

|-

! scope="row" | [[Australia]]

|

Line 524 ⟶ 634:

|

|

| colspan="12" style="background: #ABCDEFabcdef; text-align: center;" | 1st of July to 30th of June

|

|

Line 531 ⟶ 641:

|

|

|-

! scope="row" | [[Canada]]

|

Line 537 ⟶ 647:

|

|

| colspan="12" style="background: #ABCDEFabcdef; text-align: center;" | 1st of April to 31st of March

|

|

Line 548 ⟶ 658:

|

|}

From [[Special:PermanentLink/383112406#Competition record|Dwain Chambers]] (with improved table caption and structure; but the original use of color is good):

Line 560 ⟶ 670:

|-

! scope="row" | [[1998 European Athletics Championships|European Championships]]

| rowspan="3" | [[1998 in athletics (track and field)|1998]]

| [[Budapest]], Hungary

|bgcolor style="background-color: silver"; text-align=": center;" | 2nd

| 100&nbsp;metres

|-

! scope="row" | [[1998 IAAF World Cup|IAAF World Cup]]

| [[Johannesburg]], South Africa

|bgcolor style="background-color: cc9966"; text-align=": center;" | 3rd

| 100&nbsp;metres

|-

! scope="row" | [[1998 Commonwealth Games|Commonwealth Games]]

| [[Kuala Lumpur]], Malaysia

|bgcolor style="background-color: gold"; text-align=": center;" | 1st

| 4×100&nbsp;metres relay

|-

! scope="row" | [[European Cup (athletics)|European Cup]]

| rowspan="3" |[[1999 in athletics (track and field)|1999]]

| [[Paris]], France

|bgcolor style="background-color: gold"; text-align=": center;" | 1st

| 100&nbsp;metres

|-

! scope="row" rowspan="2" | [[1999 World Championships in Athletics|IAAF World Championships]]

| rowspan="2" | [[Seville]], Spain

|bgcolor style="background-color: cc9966"; text-align=": center;" | 3rd

| 100&nbsp;metres

|-

|bgcolor="silver" style="background-color: silver; text-align: center;" | 2nd

| 4×100&nbsp;metres relay

|}

== Nested data tables ==

<!-- another example

* Priority: high (accessibility level: A)

Bad structure and visual order, with icons and couloured [//en.wikipedia.org/w/index.php?title=S.M.A.R.T.&oldid=377897571#Known_ATA_S.M.A.R.T._attributes example], [//en.wikipedia.org/w/index.php?title=S.M.A.R.T.&diff=prev&oldid=380387962 partial correction]. -->

* Difficulty: unknown (not yet rated)

Nested tables can be confusing for [[screen reader]] users, however with correct usage they can be navigated as well as any other coding approach to the desired display.

== Avoiding nested data tables ==

*Priority: high (accessibility level: A)

*Difficulty: unknown (not yet rated)

The key principle in their design and implementation is to maintain normal flow, i.e. to ensure that the ordering of the content in the page code matches the order in which the content is to be presented. This also applies to other coding approaches, such as divs with CSS styling, or rowspan and colspan HTML cell attributes.

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

Nesting data tables with header cells also makes it difficult for assistive readers to parse them sensibly, and should be avoided.

{{quote|

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.

Nesting tables may be the most appropriate method where cells of the parent table are to be subdivided with uneven internal row or column breaks. Note that each table must begin on a new line.

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.

In the following example, nested tables are used to display sub-tables of varying cell heights:

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.

<div style="display: inline-table;">

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<ref>[http://joeclark.org/book/sashay/serialization/Chapter10.html Tables and frames], joeclark.org. {{strong|Note}}: this source is outdated, but the part concerning nested tables is still valid as of October 2010.</ref>}}

'''Wikitext:'''

<syntaxhighlight lang="wikitext">

{| class="wikitable"

|

{| class="wikitable"

| Insert 1up

|-

| Insert 1down:<br>&nbsp;<br>Taller than insert 1up

|}

|

{| class="wikitable"

| &nbsp;<br>Insert 2<br>full height<br>&nbsp;

|}

|

{| class="wikitable"

| Insert 3up<br>&nbsp;<br>Tall cell here

|-

| Insert 3down

|}

|

{| class="wikitable"

| Insert 4up<br>&nbsp;

|-

| Insert 4down<br>Same as above

|}

|}

</syntaxhighlight>

</div>

<div style="display: inline-table;">

<!--

'''Produces:'''

=== Bad example of nested data tables ===

{| class="wikitable"

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

|

-->

{| class="wikitable"

| Insert 1up

|-

| Insert 1down:<br>&nbsp;<br>Taller than insert 1up

|}

|

{| class="wikitable"

| &nbsp;<br>Insert 2<br>full height<br>&nbsp;

|}

|

{| class="wikitable"

| Insert 3up<br>&nbsp;<br>Tall cell here

|-

| Insert 3down

|}

|

{| class="wikitable"

| Insert 4up<br>&nbsp;

|-

| Insert 4down<br>Same as above

|}

|}

</div>

By comparison, using rowspan would not only need careful juggling of the positions and values but would break normal flow, splitting up each data subset and even causing Insert 3down and Insert 4down to be read in the wrong order:

<div style="display: inline-table;">

'''Wikitext:'''

<syntaxhighlight lang="wikitext">

{| class="wikitable"

| Insert 1up

| rowspan="4" | full height

| rowspan="3" | Insert 3up<br>&nbsp;<br>Tall cell here

| rowspan="2" | Insert 4up

|-

| rowspan="3" | Insert 1down:<br>&nbsp;<br>Taller than insert 1up

|-

| rowspan="2" | Insert 4down<br>Same as above

|-

| Insert 3down

|}

</syntaxhighlight>

</div>

<div style="display: inline-table;">

'''Produces:'''

{| class="wikitable"

| Insert 1up

| rowspan="4" | full height

| rowspan="3" | Insert 3up<br>&nbsp;<br>Tall cell here

| rowspan="2" | Insert 4up

|-

| rowspan="3" | Insert 1down:<br>&nbsp;<br>Taller than insert 1up

|-

| rowspan="2" | Insert 4down<br>Same as above

|-

| Insert 3down

|}

</div>

CSS also has table display properties which can be applied to other elements such as divs, and could be used to create the layout with correct normal flow. But it requires a custom stylesheet defining the various classes of substitute entity. Moreover, it breaks the formal separation of HTML structure vs. CSS styling by using the styling language to render the correct structure onscreen. It is unnecessary and is not recommended.

== Resources ==

Line 621 ⟶ 818:

== Notes ==

{{Reflist|group="note"}}

{{reflist|group="note"}}

== References ==

{{reflistReflist}}

=== WCAG references ===

{{#tag:references||group="WCAG"}}

[[Category:Wikipedia Manual of Style (accessibility)|Data tables tutorial]]

[[Category:Wikipedia essays and information pages about the Manual of Style]]

[[Category:Wikipedia tables]]

[[ja:Wikipedia:スタイルマニュアル (表)]]