Split off from bug 31755The **sorting icon **needs to be **below the text **in order to **narrow tables,** and to** improve accessibility** for those using **screen readers.**
Zlight would like that the tableheader indicators are on a seperate line from the table header.This would make tables fit better in more screen widths. For example; see the **monthly tables **at **"COVID-19 pandemic cases"** (link below). The later months have the widest tables since the numbers are getting very large, and so the numbers are wider. Here is a link to the second half of April:
*https://en.wikipedia.org/wiki/COVID-19_pandemic_cases#Second_half_3
To quote:The editors of that page have maintained a **separate row of sorting icons** in order to **narrow the table. **
I hope that the sorting icon is put above the header name so that tables
with many columns have more room for the header text.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:
*https://en.wikipedia.org/wiki/List_of_countries_by_income_equality
The sorting icon really needs to be above the text in a header cell. This
allows for more columns to fit within the width of the screen. It also allows
more space for the text within the header cells, since no space is taken up by
the sorting icon. This is useful for tables with many columns. For example; see
*http://en.wikipedia.org/wiki/List_of_countries_by_intentional_homicide_rateWikipedia_talk:Manual_of_Style/Accessibility/Data_tables_tutorial#Help:Sorting._Section_about_sorting_buttons_in_a_separate_row._Accessibility_questions
Go to that page and make your browser window more narrow (the middle button of
the 3 buttons at the top of the browser window). Drag the right side of the
window to get various window widths. Scroll down the page. Note that when the
sorting icon is to the right of the text that the sorting icon does not wrap.
So the table then requires a horizontal scrolling bar sooner than the tables
with the sorting icons above the headers.
Also, note the tables in the "Country subdivisions" section of that pageIt 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.** Please **center the sorting icon.** style="background-position: center;"
Maintaining a **separate row of sorting icons** requires additional steps. The
**Many tables start off closed. I can not put the sorting icons above the texte editors are not familiar with any of this.** They have to know it is possible. If I
do then the column heaThey have to know to add <br> to it in order text is not readableo make it visible. The text would be readable if
the default position of the sorting icon was above the texty 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. Right now there is
no way I can fix this problem.
--------------------------
**Version**: 1.18.x
**Severity**: normalSee Help:Sorting section:
*https://en.wikipedia.org/wiki/Help:Sorting#Sorting_buttons_in_a_separate_row