Page MenuHomePhabricator

Sorting icon needs to be below the table header text to keep tables narrower, and for screen readers.
Open, MediumPublic

Description

The sorting icon needs to be below the text in order to narrow tables, and to improve accessibility for those using screen readers. There are updated links below.

This would make tables fit better in more screen widths. Some Covid-19 pages with examples of sorting icons placed below the table header text:
https://en.wikipedia.org/wiki/COVID-19_pandemic_cases_in_February_2020
Note that this is not necessary once there are 7 digit numbers with commas making the cells wider as in later Covid months.

https://en.wikipedia.org/wiki/Template:Monthly_cumulative_COVID-19_death_totals_by_country
The above template table with a row of sorting icons is on this page linked below that gets 30,000 views per day. That means it is seen in all screen widths from narrow to wide.
https://en.wikipedia.org/wiki/COVID-19_pandemic_by_country_and_territory#Cumulative_monthly_death_totals_by_country

But a separate row of sorting icons annoys those using screen readers. It's not a deal breaker for them. It's just annoying. From an April 2020 discussion someone using a screen reader wrote: "It's still very readable with the empty/clickable row, it's just more annoying to have to go past blank cells; I know they can occur in other circumstances, too. Perhaps this is one of these cases where a minor accessibility improvement loses out for now to better display on screens." Discussion:
Wikipedia talk:Manual of Style/Accessibility/Data tables tutorial/Archive 2#Help:Sortable tables. Section about sorting buttons in a separate row. Accessibility questions

It is better to put the default location of the sorting icon below the header text rather than above it. This way the sorting icons line up evenly.

Also, please center the sorting icon horizontally below the text. style="background-position: center;"

Maintaining a separate row of sorting icons requires additional steps. Many table editors are not familiar with any of this. They have to know it is possible. They have to know to add <br> to it in order to make it visible, or otherwise it is just a narrow incomprehensible bar. They have to know to add data-sort-type=number to the header cell with the sorting icon in order for that column to sort numbers correctly. See Help:Sorting section:
*https://en.wikipedia.org/wiki/Help:Sortable_tables#Sorting_buttons_in_a_separate_row

Details

Reference
bz33249

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 21 2014, 11:59 PM
bzimport set Reference to bz33249.
bzimport added a subscriber: Unknown Object (MLST).

I changed my user name here from Zlight to Timeshifter (name on Wikipedia).

See [[Help:Sorting]], and the section called "Adding a separate rank column (1,2,3) next to a table". Many tables are wide enough to cover the whole screen on many monitors, notebooks, and tablets.

It is not possible on those tables to add a separate rank column because of this. One can narrow the headers with breaks in the titles: <br>. Then one can make the number of rows in the header in the separate table with the rank column match the number or rows in the headers of the main table.

Putting the sort button above the header title helps narrow the table some more. Every little bit helps. Otherwise, some smaller screen widths will constrict the table enough to force the creation of more lines in the header row. This breaks the alignment of rows between the 2 tables.

Of course, in this case, what is really needed is a static rank column (or row numbering) that is integral to the main table (not in a separate table). I will file a bug report requesting that feature.

Concerning my last comment. See bug 40634 - Table option for static rank order column, or row numbering.

Back to this discussion. This discussion was split off from bug 31755. There I changed my mind and said that the sort button needed placement options, and not a default position above the text as I first suggested.

Maybe something like sort-button=top, sort-button=right, sort-button=bottom, sort-button=left. It could be placed at the top of the table wikitext:

{| class="wikitable sortable" sort-button="top"

I recommend having the button below the text in these cases instead of above. The text data should be more prominent than the interaction button, and it should also make clear that the header itself is not among those parts that will be sorted.

The relevant file that needs changing is resources / jquery / jquery.tablesorter.css . If Timeshifter's proposed syntax would be used, the added code would be roughly something like this:

table.jquery-tablesorter[sort-button="bottom"] th.headerSort {
  background-position: bottom 3px center;
  padding-right: 0.2em;
  padding-bottom: 12px;
}

, perhaps with some fallback for the crummy browsers. However, using an attribute to change CSS is probably not a good idea. I suggest using a simple CSS class (perhaps "headerSortVerticalPosition" or something) to change it, and have it applied to the <th> itself, rather than the entire table, so as to allow different positioning per button/header (making the selector be something like table.jquery-tablesorter th.headerSort.headerSortVerticalPosition).

The fix for bug 38911 and bug 53211 implemented in March 2014 means that the sorting button is now placed in the lowest header cell regardless of the complexity of the headers, or whether there are colspans/rowspans in the headers.

This was discussed here (will eventually be archived):
*[[Help_talk:Sorting#Table_with_more_complex_headers]]

See also:
*[[Help:Sorting#Tables_with_complex_headers]]

So it is now possible to create a lower row of header cells with sort buttons. This was not possible in the past, if I am remembering correctly, or it was problematic. I recently created the following help section:
*[[Help:Sorting#Putting_sorting_buttons_below_header_text]]
It discusses how to set it up, and some options for the lower row of header cells:

So I am going to change the title of this bug to "Option for sort indicator to be below the table header text". And then I will change the status to resolved.

I am opening this back up. I started this Phabricator task and marked it as resolved in 2014. But after discussion today with Graham87 who uses a screen reader I am removing that "resolved" status. See:
*https://en.wikipedia.org/wiki/User:Graham87
*https://en.wikipedia.org/wiki/Wikipedia_talk:Manual_of_Style/Accessibility/Data_tables_tutorial - see section on that page (and eventually in its archives) currently titled "Help:Sorting. Section about sorting buttons in a separate row. Accessibility questions".

Graham87 wrote: "It's still very readable with the empty/clickable row, it's just more annoying to have to go past blank cells; I know they can occur in other circumstances, too. Perhaps this is one of these cases where a minor accessibility improvement loses out for now to better display on screens."

I, Timeshifter, wrote back: "It would be nice if the developers would put the sorting button below the header text. That would solve all the problems. I think I am going to remove 'resolved' from that Phabricator task, if possible. Then I will point them here. [to the Wikipedia discussion]."

And I see the need yet again for more columns in less space. Using a separate row to get sorting icons below the table text helps a lot here:
*https://en.wikipedia.org/wiki/2019%E2%80%9320_coronavirus_pandemic_cases - scroll down to the tables by month. They are doing half months per table. 17 columns each. That is about all one can put in a 20 inch monitor. Even less if one increases the text size as I do.

But that extra row of sorting indicators is only there because I happened to come by that page. Most editors have no clue about this. And they shouldn't. The sorting indicators need to be below the table header text by default. That is better than above the header text, because if placed below the header text the icons line up. It looks better.

Timeshifter renamed this task from Option for sort indicator to be below the table header text to Sorting icon needs to be below the table header text.May 6 2020, 7:23 AM
Timeshifter updated the task description. (Show Details)
Timeshifter renamed this task from Sorting icon needs to be below the table header text to Sorting icon needs to be below the table header text to keep tables narrower, and for screen readers..Apr 29 2021, 12:44 AM
Timeshifter updated the task description. (Show Details)

A discussion has started at Template_talk:Import-blanktable#class=sortunder on adding this functionality to the TemplateStyles, which would use the "sortunder" table class. Below is a version of the styles that might work for this task .

@media screen {
	.client-js .sortunder.sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable),
	.sortunder.jquery-tablesorter th.headerSort {
		background-position: bottom 0.2em right;
		padding-bottom: 1em;
		padding-right: 0.4em;
	}
	.client-js .sortunder.sortable:not(.jquery-tablesorter) > * > tr:first-child > th.unsortable,
	.sortunder.jquery-tablesorter th.unsortable {
		padding-bottom: 1em;
	}
}

I created the Sort under template to reposition the sorting arrows under the text. They can be center or right aligned. I kept the traditional right alignment, which may have some uses. I don't see a need for left alignment, but it can be added if there is a demand.

Please review. If you see any issues, bring it up on that template's talk page.

Thanks Jroberson108 for creating the "Sort under" template.

To comment, etc.:
Template talk:Sort under

Comments are requested concerning whether there should be a default class=sort-under, and whether it should be for centered sorting icons or right-aligned sorting icons. Or even left-aligned ones.

Someone at the technical Village Pump suggested going to this MOS discussion page since it is a style discussion, and not a technical problem. See:
Wikipedia talk:Manual of Style/Tables#Template:Sort under