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

Revision as of 01:56, 5 June 2024

Latest revision as of 18:46, 8 October 2024

(17 intermediate revisions by 7 users not shown)

Line 1:

{{skip to talk}}

{{page views}}

{{talk header}}

{{WikiProject banner shell|

{{WikiProject Accessibility}}

}}

{{talk header|archive_age=250|archive_bot=Lowercase sigmabot III}}

{{User:MiszaBot/config

| algo = old(250d)

Line 12 ⟶ 14:

| minthreadsleft = 4

}}

== Row headers when table contains only two columns ==

This issue has bugged me for ages and I'd like some guidance, although I confess I'm not at all familiar with some of the terminology involved in table creation.

On a few album articles, I've seen editors reformatting a charts table so that, where previously the two columns (national chart/compiler; peak position) both appeared in what I'd describe as a shade of light grey or off-white, now the left-hand column is rendered with a dark grey background, just like the column headers. In my opinion, this treatment looks over the top and something of an eyesore, because – since the chart names take up far more width than a one-, two- or three-digit chart position – the vast majority of the table becomes a mass of heavy, dark grey.

As an example, the [[Rubber Soul]] article looked [https://en.wikipedia.org/w/index.php?title=Rubber_Soul&oldid=1046980802#Charts like this] until recently; it now looks [https://en.wikipedia.org/w/index.php?title=Rubber_Soul&oldid=1048879685#Charts like this]. I think the first example is perfectly clear and easy on the eye. Also, it's not as if tables such as reviewer ratings boxes get the same heavy treatment, eg at [https://en.wikipedia.org/w/index.php?title=Rubber_Soul&oldid=1046980802#Retrospective_assessment Rubber Soul again]. And I see tables where there are several more rows (in which case, you'd think the row header aspect was far more important) but all are set with the lighter, off-white background: eg [https://en.wikipedia.org/wiki/2016_Summer_Olympics_medal_table#Medal_table 2016 Olympics medal table], [https://en.wikipedia.org/wiki/2012_Summer_Olympics#Bidding_process 2012 Olympics host city election]. (In addition, I've come across pages like [[Help:Sortable tables]] where [https://en.wikipedia.org/wiki/Help:Sortable_tables#Example none of the examples] have this treatment either._

So my question is, is it possible/permissible to still set these two-column charts tables without the heavy background? I guess it's an issue to do with "plainrowheaders"(?), the term used by an editor to explain a [https://en.wikipedia.org/w/index.php?title=All_Things_Must_Pass&diff=1038588755&oldid=1038586559 similar change in another album article]. They cited [[MOS:ACCESS]], although I have to say I couldn't find any reference to plainrowheaders on that MOS page – which is why I've ended up here, in fact. Thanks, [[User:JG66|JG66]] ([[User talk:JG66|talk]]) 01:57, 10 October 2021 (UTC)

:A big problem is that blind people using screen readers can't really know just how annoying a grey background is. They can't see it.

:Also, another problem is that some editors, especially some of those that camp out on this talk page, are trying to put scope tags on all header and column rows, even though almost no other websites do. Because other websites look at the actual [[Web Content Accessibility Guidelines]] at the source, and not as they are interpreted by some people on Wikipedia. --[[User:Timeshifter|'''Timeshifter''']] ([[User talk:Timeshifter|talk]]) 02:48, 10 October 2021 (UTC)

::Thank you for the speedy reply but ... um, I don't know if your opening paragraph is a dig at my complaint or ...? Sorry, could just be the way I'm reading it. I'm an optimist – I'll take it that it isn't a dig(!)

::I fully appreciate the importance of accessibility to all. So I suppose the question is whether ensuring the best access for screen readers (via "wikitable sortable", "plainrowheaders"?) necessarily has to dictate how that process or code is visually rendered in a table. As mentioned, this approach hardly seems consistent – eg, how are screen readers coping with the two-column reviewer ratings box?

::Again, I emphasise that I'm completely ignorant about table formatting. I'm sure that tests the patience of regulars here, but I would like to get to the bottom of it if possible. [[MOS:CHARTS]] says "The chart positions should be organized into one table, and the table should be formatted using <code>class="wikitable sortable"</code>." Well, that was already in place before the recent changes at one or two album articles I watch; it seems to have been the introduction of these plainrowheaders that creates the darker grey background. [[User:JG66|JG66]] ([[User talk:JG66|talk]]) 03:25, 10 October 2021 (UTC)

:::{{u|JG66}}. No dig intended. I deleted my first answer. Here is my second answer. See:

:::'''[https://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 | Techniques for WCAG 2.0].''' It says:

:::"Note: For simple tables that have the headers in the first row or column then it is sufficient to simply use the TH elements without scope."

:::See: '''[https://www.w3.org/WAI/tutorials/tables Tables Concepts &bull; Tables &bull; WAI Web Accessibility Tutorials].''' It says:

:::"Tables with one header for rows or columns: For tables with content that is easy to distinguish, mark up header cells with <nowiki><th></nowiki> and data cells with <nowiki><td></nowiki> elements."

:::But when you go to the fine print it says "For tables with unclear header directions, define the direction of each header by setting the scope attribute to col or row."

:::I think most tables on Wikipedia do not have unclear header directions. The column headers are on the top. The row headers are on the left.

:::'''[https://www.w3.org/TR/WCAG20-TECHS/H51.html H51: Using table markup to present tabular information | Techniques for WCAG 2.0].''' "Simple tables generally have only one level of headers for columns and/or one level of headers on the rows." Example 1 is definitive as far as I am concerned. There is no requirement for scopes on such simple tables.

:::I did some tests awhile back that confirmed this:

:::[[Wikipedia talk:Manual of Style/Accessibility/Data tables tutorial#Comparing tables with and without scope=col and scope=row]]. Please ignore the heated tone of some of the discussion. I apologize for my part in the heated tone.

:::Getting to your questions. I don't see the need for designating row headers in the 2 column table examples you gave. Screen readers will read the column header for each data cell. It will be obvious to the user what the relationship is between the the 2 cells in each row, even without row headers. And scopes are total overkill in that example.

:::--[[User:Timeshifter|'''Timeshifter''']] ([[User talk:Timeshifter|talk]]) 10:41, 10 December 2021 (UTC)

::::Thanks, {{u|Timeshifter}}. You've given me a fair bit of homework, and I can't promise I'll jump on it immediately ... As I've said, I'm hopeless with table terminology ("scope"?).

::::I'm all for ensuring good accessibility for screen readers, but I'm confused as to why a simple, two-column table has to be rendered in the current way. And/or: why it is that the screen-reader-friendly input needs to even register visually when one reads the page "normally". (Why do we need to ''see'' what that software handles differently?) As I've said, my concern is with the two-column tables for record charts. Not only is it so simple in presentation that one questions whether info in the left-hand column really is a row header, but the table ends up such an eyesore, because the darkened-out LH column is usually far wider than the RH column, which contains just a single or double digit.

::::Anyway, don't feel the need to reply to that. I obviously need to do some reading. [[User:JG66|JG66]] ([[User talk:JG66|talk]]) 15:57, 10 December 2021 (UTC)

:::::{{u|JG66}}. I agree. I don't see the need for the gray background of the row headers. Or the bold font. It is obvious what are row headers in most tables when the row headers are on the left side of the table. And screen readers only need the scopes or <nowiki><th></nowiki>.

:::::I think a gray background with black text is not enough contrast. Especially when the gray is too dark as in Wikipedia tables. And I keep my monitor brightness turned down. As recommended by many eye doctors. That makes the contrast even less.

:::::It is annoying. So it would be nice to have truly plain row headers with a white background and a regular (non-bold) font. Then people would be more likely to add scopes for row headers. At least for more complex tables. Scopes are not needed on simple tables. --[[User:Timeshifter|'''Timeshifter''']] ([[User talk:Timeshifter|talk]]) 02:25, 11 December 2021 (UTC)

== Rowgroups and plainrowheaders ==

Hi, currently in the `Complex tables` section (but not in any section previous), it is recommended to use scope=rowgroup for row headers that are part of a rowspan. I was going to add this to my accessibility reviews at [[WP:FLC]], but quickly found out that the 'plainrowheaders' table class doesn't seem to affect scope=rowgroup cells, only scope=row. Is this a known issue? For example:

{| class="wikitable sortable plainrowheaders"

|+{{sronly|Awards and nominations received by Anne Hathaway}}

|-

! scope="col" | Organizations

! scope="col" | Year

! scope="col" | Recipient(s)

! scope="col" | Category

! scope="col" | Result

|-

!scope="rowgroup" rowspan="2"| [[Academy Awards]] {{anchor|A}}

| [[81st Academy Awards|2009]]

| ''[[Rachel Getting Married]]''

| [[Academy Award for Best Actress|Best Actress]]

| {{nom}}

|-

| [[85th Academy Awards|2013]]

| ''[[Les Misérables (2012 film)|Les Misérables]]''

| [[Academy Award for Best Supporting Actress|Best Supporting Actress]]

| {{won}}

|-

!scope="row"| [[Alliance of Women Film Journalists]]

| 2009

| ''[[Rachel Getting Married]]''

|Best Ensemble Cast

| {{won}}

|}

plainrowheaders is affecting the second non-spanned row but not the first, spanned row. --'''[[User:PresN|<span style="color:green">Pres</span>]][[User talk:PresN|<span style="color:blue">N</span>]]''' 15:10, 20 March 2022 (UTC)

:{{re|PresN}} I created an issue for it here: [[MediaWiki talk:Common.css#Plainrowheaders row and rowgroup scopes]]. [[User:Jroberson108|Jroberson108]] ([[User talk:Jroberson108|talk]]) 21:25, 20 March 2022 (UTC)

::{{re|Jroberson108}} Thanks! --'''[[User:PresN|<span style="color:green">Pres</span>]][[User talk:PresN|<span style="color:blue">N</span>]]''' 22:24, 20 March 2022 (UTC)

:::This is now fixed. --'''[[User:PresN|<span style="color:green">Pres</span>]][[User talk:PresN|<span style="color:blue">N</span>]]''' 17:56, 22 March 2022 (UTC)

== Row with blank data ==

I created a table, which has became the subject of an edit war between admins and an anon editor. The table is as below (prior to the edit war):

{| class="wikitable sortable plainrowheaders" style="text-align: left; border-spacing: 2px; border: 1px solid darkgray;"

|+List of special service brigades

! width="15%" scope="col" |Formation name

! width="5%" scope="col" |Date formed

! width="5%" scope="col" |Wartime date ceased to exist

! width="5%" scope="col" |Location(s) served

! width="10%" scope="col" |Notable campaign(s)

! class="unsortable" width="55%" scope="col" |Notes

! class="unsortable" width="5%" scope="col" |Source(s)

|-

! scope="row" align="center" |[[1st Special Service Brigade]]

| align="center" |{{dts|November 1943}}

| align="center" |N/A

| align="center" |Italy, UK, France, Belgium, Netherlands, Germany

| align="center" |[[Allied invasion of Sicily]], [[Operation Overlord|Normandy]], [[Allied advance from Paris to the Rhine]], [[Western Allied invasion of Germany]]

| align="center" |Redesignated as 1 Commando Brigade, on 6 December 1944.

| align="left" |Source info here

|}

The following is the edit that is made, which has been reverted.

{| class="wikitable sortable plainrowheaders" style="text-align: left; border-spacing: 2px; border: 1px solid darkgray;"

|+List of special service brigades

! width="15%" scope="col" |Formation name

! width="5%" scope="col" |Date formed

! width="5%" scope="col" |Wartime date ceased to exist

! width="5%" scope="col" |Location(s) served

! width="10%" scope="col" |Notable campaign(s)

! class="unsortable" width="55%" scope="col" |Notes

! class="unsortable" width="5%" scope="col" |Source(s)

|-

! scope="row" align="center" |[[1st Special Service Brigade]]

| align="center" |{{dts|November 1943}}

|{{N/A}}

| align="center" |Italy, UK, France, Belgium, Netherlands, Germany

| align="center" |[[Allied invasion of Sicily]], [[Operation Overlord|Normandy]], [[Allied advance from Paris to the Rhine]], [[Western Allied invasion of Germany]]

| align="center" |Redesignated as 1 Commando Brigade, on 6 December 1944.

| align="left" |Source info here

|}

Does the template <nowiki>{{N/A}}</nowiki> conform to the MOS for a table such as this? Should it be used or not?[[User:EnigmaMcmxc|EnigmaMcmxc]] ([[User talk:EnigmaMcmxc|talk]]) 11:55, 8 July 2022 (UTC)

:{{re|EnigmaMcmxc}} I couldn't find any recommended styles for empty cells. Maybe someone else might find something? I found a similar unanswered question here: [[Wikipedia talk:Manual of Style/Tables#Empty cells]]. If the intention is to indicate that the data wasn't overlooked as a blank cell might suggest, then using either one seems sufficient to me. [[Template:N/a]], which displays an em dash, is used on approximately 47,000 pages, so in a way you could say it is an acceptable option. I don't know the number of "N/A" uses, but [[N/A]] indicates that it is a "common abbreviation in tables". Using one over the other seems more like a preference since to me they both indicate the same thing. Regardless of which one is used, it should match the same usage in other tables found on the same page and follow consensus.

:Just to see what other manuals of style suggest, I searched and found the Chicago Manual of Style suggested using an em dash, ellipsis, n/a, or n.d. with some rules around the latter two abbreviations (see [https://ux.stackexchange.com/questions/91315/how-to-represent-no-data-cells-in-html-tables]). Note, the Chicago MoS doesn't dictate Wikipedia's MoS.

:{{tq|Section 3.65: Empty cells. If a column head does not apply to one of the entries in the stub, the cell should either be left blank or, better, filled in by an em dash or three unspaced ellipsis dots. If a distinction is needed between "not applicable" and "no data available," a blank cell may be used for the former and an em dash or ellipsis dots for "no data" ... If this distinction is not clear from the text, a note may be added to the table. (Alternatively, the abbreviations n/a and n.d. may be used, with definitions given in a note.) A zero means literally that the quantity in a cell is zero....}} [[User:Jroberson108|Jroberson108]] ([[User talk:Jroberson108|talk]]) 13:46, 8 July 2022 (UTC)

:As an added note, the "N/a" template uses the "data-sort-value" attribute, so sorting it versus the "N/A" text may order them differently unless the same attribute is used on the text version. [[User:Jroberson108|Jroberson108]] ([[User talk:Jroberson108|talk]]) 14:14, 8 July 2022 (UTC)

::Thank you for the in-depth response on this. I played around with the table, although it is very limited, and both seem to sort in the same manner. I guess with the widespread use of the template and outside style manuals saying that is more preferable, I think I can end the edit war with using that template.[[User:EnigmaMcmxc|EnigmaMcmxc]] ([[User talk:EnigmaMcmxc|talk]]) 17:25, 9 July 2022 (UTC)

== Does this violate accessibility guidelines? ==

Recently, I edited [[List of feature films with gay characters]] to change the chart from a format where all the countries are bunched together into one column, as the below example shows:

{| class="wikitable sortable" style="width: 100%"

|-

! style="width:4%;"| Year

! style="width:20%;"| Title

! style="width:13%;"| Character(s)

! style="width:13%;"| Actor

! style="width:36%;"| Notes

! style="width:9%;"| Country

! style="width:4%;" class="unsortable"| {{Abbr|Ref(s)|Reference(s)}}

|-

| 1968

| ''[[The Mercenary (film)|The Mercenary]]''

| Ricciolo (Curly)

| [[Jack Palance]]

|

| Italy, Spain, United States

| <ref name="ridjim">{{cite news|last1=Ridley |first1=Jim |title=''The Mercenary'', Locked and Loaded Two Nights Only |url=https://www.nashvillescene.com/arts_culture/i-the-mercenary-i-locked-and-loaded-two-nights-only/article_1c78df67-e4c0-533d-91a3-fa6bae0c3728.html |work=[[Nashville Scene]] |date=8 December 2012}}</ref><ref name="belnic">{{cite web|last1=Bell |first1=Nicholas |title=The Mercenary (1968) {{!}} Blu-ray Review |url=https://www.ioncinema.com/news/disc-reviews/the-mercenary-1968-the-mercenary-1968-blu-ray-review-sergio-corbucci-blu-ray-review |website=Ioncinema.com |date=7 November 2017}}</ref>

|}

I changed it to this:

{| class="wikitable sortable" style="width: 100%"

|-

! style="width:4%;"| Year

! style="width:20%;"| Title

! style="width:13%;"| Character(s)

! style="width:13%;"| Actor

! style="width:36%;"| Notes

! style="width:9%;"| Country

! style="width:4%;" class="unsortable"| {{Abbr|Ref(s)|Reference(s)}}

|-

| rowspan="3"|1968

| rowspan="3"|''[[The Mercenary (film)|The Mercenary]]''

| rowspan="3"|Ricciolo (Curly)

| rowspan="3"|[[Jack Palance]]

| rowspan="3"|

| Italy

| rowspan="3"|<ref name="ridjim" /><ref name="belnic" />

|-

| Spain

|-

| United States

|}

One user [https://en.wikipedia.org/w/index.php?title=List_of_feature_films_with_gay_characters&type=revision&diff=1097087409&oldid=1097084298 reverted this], saying "Do not add rows just for countries. Don't muck up the list and its formatting. Don't make the table more complicated for editors to edit" while [https://en.wikipedia.org/w/index.php?title=List_of_feature_films_with_gay_characters&type=revision&diff=1097096971&oldid=1097087409 I said] that "putting all the countries into one row makes the chart inaccessible... and I'd argue it violates [[WP:ACCESSIBILITY]]. And it doesn't add too much complexity and it can be easily followed". Instead of changing anymore of the page, I decided to post here. If this isn't the right place, then I'd be glad to post this somewhere else instead. Is the change I did in line with MOS for a table such as this? Should it be used? [[User:Historyday01|Historyday01]] ([[User talk:Historyday01|talk]]) 19:50, 8 July 2022 (UTC)

:{{re|talk:Historyday01}} Both are accessible, but the second one is more complex for the screen reader to read making it more difficult to understand, so simpler table structures are always preferred. In addition, the simpler comma delimited list better follows [[MOS:NO-TABLES]] recommendations when comparing a comma list to cells. [[User:Jroberson108|Jroberson108]] ([[User talk:Jroberson108|talk]]) 20:29, 8 July 2022 (UTC)

::Hmm. That makes sense. I will admit that I've done the second option more than the first as I believed that using the commas would mess up the "country" category. But, I'm totally ok with a simpler table anyhow, as it makes it easier to edit. [[User:Historyday01|Historyday01]] ([[User talk:Historyday01|talk]]) 21:38, 8 July 2022 (UTC)

{{Reflist-talk}}

== MOS:COLHEAD potential workaround? ==

Line 204 ⟶ 26:

::That is something I originally proposed, but you know, some kinds of compromise have to take as this is Wikipedia. :) [[User:Unnamelessness|Unnamelessness]] ([[User talk:Unnamelessness|talk]]) 06:08, 4 June 2024 (UTC)

:::I know. It is the bitter sweet truth. You can't please everybody. [[User:Qwerty284651|Qwerty284651]] ([[User talk:Qwerty284651|talk]]) 10:21, 4 June 2024 (UTC)

== Cells on multiple rows ==

Hi, are the cells spanned on multiple rows accessible? E.g., [[DC Extended Universe#Films]]: the correct way is to split the "Zack Snyder" cell into two cells with the same date or are they just fine as they are? [[User:Redjedi23|Redjedi23]] ([[User talk:Redjedi23|talk]]) 14:43, 21 June 2024 (UTC)

:I state that because if I try to read the ''Batman v Superman'' row, the Apple VoiceOver skips the director's name [[User:Redjedi23|Redjedi23]] ([[User talk:Redjedi23|talk]]) 15:41, 21 June 2024 (UTC)

::They're fine as they are. VoiceOver isn't that good with this kind of thing. [[User:Graham87|Graham87]] ([[User talk:Graham87|talk]]) 15:51, 21 June 2024 (UTC)

:::@[[User:Graham87|Graham87]] I get the same result with NVDA [[User:Redjedi23|Redjedi23]] ([[User talk:Redjedi23|talk]]) 16:01, 21 June 2024 (UTC)

::::{{replyto|Redjedi23}} Same, but also those sorts of tables aren't meant to be read linearly ... they're supposed to be read with table navigation commands (control+alt+arrows in NVDA's case), which works as expected. [[User:Graham87|Graham87]] ([[User talk:Graham87|talk]]) 17:39, 21 June 2024 (UTC)

:::::But in this way the header column loses its meaning, right? [[User:Redjedi23|Redjedi23]] ([[User talk:Redjedi23|talk]]) 18:01, 21 June 2024 (UTC)

::::::Not really. Screen reader users will just get used to having a blank cell (with information hopefully about the row spans) and things will be fine. [[User:Graham87|Graham87]] ([[User talk:Graham87|talk]]) 18:16, 21 June 2024 (UTC)

==Colgroups and rowgroups==

In [[Wikipedia:Manual of Style/Accessibility/Data tables tutorial#Complex tables]] it says "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..." Can a combination of those be used when a column spans multiple rows <code>scope="rowgroup" colspan="2"</code> and when a row spans multiple columns <code>scope="colgroup" rowspan="2"</code> in complex tables? [[User:Qwerty284651|Qwerty284651]] ([[User talk:Qwerty284651|talk]]) 12:00, 13 August 2024 (UTC)

== Better describe the problem of missing captions for screen reader users (SRUs)? ==

Do we need to expand on the issue of missing captions? I ask because '''so many data tables do not have a caption''', suggesting that editors are unaware of the problems caused where one is missing. For example, a SRU can call up a list of tables on a page, each labelled by their caption. Where the caption is missing, the table is announced along the lines of "6 columns, 20 rows" by [[VoiceOver]]. I suspect that other software says something similar. Unless the user is a mind-reader (!), this is no good at all. What do others think? What can we do? I do not want to spend my whole editing career adding captions to existing tables! [[User:CrazyBuilder|<span style="color: #db0000">Crazy</span><span style="color: #3c78b4">Builder</span>]] [[User talk:CrazyBuilder|talk]] 20:08, 7 October 2024 (UTC)