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

Revision as of 01:20, 14 December 2023

Latest revision as of 14:55, 21 April 2025

(14 intermediate revisions by 7 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>

Line 15:

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

===Table style===

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

'''Wikitext:'''

Line 51 ⟶ 52:

</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>

; 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>)====

; 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, centered 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:

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

Line 64 ⟶ 68:

<syntaxhighlight lang="wikitext">

{| class="wikitable plainrowheaders"

|-

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

! scope="col" | column header 51

! scope="col" | column header 62

|-

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

| data

|}

</syntaxhighlight>

</div>

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

'''Produces:'''

{| class="wikitable plainrowheaders"

|-

! scope="col" | column header 51

! scope="col" | column header 62

|-

! scope="row" colspanstyle="2font-size: larger;" | row header 5

| data

|}

</div>

Line 79 ⟶ 101:

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 wiki 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|The Equalizer (1985 TV series)}}''

| style="text-align: center;" | 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]]"}}

|-

| 1989

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

| style="text-align: center;" | 1989

| Dillon

| [[TVTelevision film]]

|-

| 1990

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

| style="text-align: center;" | 1990

| Brian Knox / Dr. Death

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

|}

Line 119 ⟶ 141:

=== 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%"

|-

Line 289 ⟶ 311:

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

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

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

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

|-

! scope="col" | column header 3

! scope="col" | column header 4

! scope="col" | column header 5

! scope="col" | column header 6

|-

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

! scope="row" | row header 1

| data || data || data || data

|-

! scope="row" | row header 2

| data || data || data || data

|-

! scope="rowgrouprow" rowspancolspan="2" | row header group 23

| data || data || data || data

! scope="row" | row header 3

| data || data || data || data

|-

! scope="row" | row header 4

| data || data || data || data

|-

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

| data || data || data || data

|}

</syntaxhighlight>

Line 323 ⟶ 335:

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

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

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

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

|-

! scope="col" | column header 3

! scope="col" | column header 4

! scope="col" | column header 5

! scope="col" | column header 6

|-

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

! scope="row" | row header 1

| data || data || data || data

|-

! scope="row" | row header 2

| data || data || data || data

|-

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

! scope="row" | row header 3

| data || data || data || data

|-

! scope="row" | row header 4

| data || data || data || data

|-

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

| data || data || data || data

|}

</div>

Line 826 ⟶ 828:

[[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:スタイルマニュアル (表)]]