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

Revision as of 01:26, 24 June 2022

Revision as of 06:17, 24 June 2022

Line 5:

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)

<pre>

Line 64:

===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#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/383672967#Filmography|Tobin Bell#Filmography]]:

Line 82:

|-

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

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

|

| Episode: "[[List of The Equalizer episodes#Season four|The Day of the Covenant]]"

|-

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

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

| Dillon

| [[TV film]]

|-

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

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

| Brian Knox

| Episode: "Crossing the Line"

Line 101:

== 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. Assistive technologies will get confused as they cannot know which previous headers still apply to parts of the table after the first one.{{dubious}}

Line 163:

=== 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 171:

! 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: #CC9966;" | 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 198:

! 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: #CC9966;" | 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 219:

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

! 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: #CC9966" | 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]]

| 1995

| {{BLR}}

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

| style="background-color: #CC9966;" | 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

|

|}

Line 276:

When a column header spans two columns, use <code>! scope="colgroup" colspan="2" | </code>. When a row header spans two rows, use <code>! scope="rowgroup" rowspan="2"| </code>.<ref name="H63" group="WCAG"/>

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

{| class="wikitable"

Line 312:

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

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

Line 401:

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: 9%;" | Country

! scope="col" widthstyle=100px"width: 9%;" | 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:

|

|

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

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

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

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

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

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

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

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

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

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

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

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

|

|

Line 463:

|

|

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

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

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

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

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

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

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

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

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

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

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

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

|

|

Line 486:

|}

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

|+ Fiscal years by country

|-

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

! scope="col" widthstyle=100px"width: 9%;" | 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:

|

|

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

|

|

Line 537:

|

|

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

|

|

Line 548:

|

|}

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

Line 560:

|-

! 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

|}

<!-- another example

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

== Avoiding nested data tables ==

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

{{quoteBlockquote|

Visitors using screen readers and Braille displays can chug through pages one word after another or navigate from one “item”"item" to another, where “items”"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.

Line 621 ⟶ 618:

== Notes ==

{{reflistReflist|group="note"}}

{{reflist|group="note"}}

== References ==

{{reflistReflist}}

=== WCAG references ===

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