Suche einen Sorting-Button bzw. ein Sorting Icon

[marctrix]

Hej JürgenB,

ich habe gestern Abend den Sortierer noch überarbeitet. Siehe https://forum.selfhtml.org/self/2020/jan/08/suche-einen-sorting-button-bzw-ein-sorting-icon/1762746#m1762746.

Der Tooltip ist noch für alle gleich, aber für assistive Techniken habe ich Hinweise eingebaut, die die Sortierrichtung angeben.

Ja, hatte wohl noch eine alte Seite im Cache?!? - Später habe ich es dann auch gesehen.

Hier http://test.berkemeier.eu/TableSort_Beispiel.html habe ich auch den Tooltip angepasst. So richtig bring es das aber noch nicht, da bei Tastaturbenutzung der Tooltip (title) ja nicht angezeigt wird, nur bei Mouseover.

Was meinst du dazu?

superschwer!

1. Tooltipps sind ein Design-Fehler. So die richtige, aber wenig hilfreiche Usability-Floskel, die man üblicherweise vor den Latz geknallt bekommt.
2. Vorgeschrieben sind beschriftete Icons in keinem Test (also für Blinde schon, aber weder WCAG noch BITV verlangen, dass ein Icon beschriftet wird. Wenn du den Schattenschnitt von Mickey Mouse statt der Pfeile nimmst, würdest du einen Test bestehen - oder das Symbol einer Diskette zum Speichern, obwohl sicher mindestens die Hälfte der Tabletnutzer noch nie eine Diskette gesehen haben). Auch das also nicht hilfreich.
3. Wenn es Dir auf die Nutzer ankommt und nicht darum, Normen zu erfüllen, würde ich versuchen, die Symbole durch Buchstaben zu ersetzen. Für etwas kurzes reicht der Platz fast immer, also beispielsweise "A bis Z" bei aufsteigender alphabetischer Sortierung - Kann dann ja gerne noch ein "⬆︎" zusätzlich sein. Der Platz ist sicher meistens auch noch da. Vor Screenreadern verbergen. Der "Pfeil nach oben" dürfte da nur Verwirren. Also Dafür noch ein aria-sort="ascending". - Wird noch nicht von allen Screenreadern gelesen, aber wir haben derzeit nicht viele andere Möglichkeiten. Bei Zahlen entsprechend "0 bis 9 <span aria-hidden"true">⬆︎</span>" oder noch kürzer "0-9".

Jedenfalls muss man sich hier viele Gedanken zu machen.

Heydon Pickering hat nach dem letzten Accessibility Club, bei dem wir darüber geredet haben, folgenden Hinweis bei seiner sortierbaren Tabelle hinzugefügt (bei der er auch Pfeile benutzt):

"Warning: Technically here I am using the arrow to express the button's current state, not the state pressing it will achieve. In many circumstances (and as discussed in Toggle Buttons) this is a mistake. The important thing here is the change in arrow direction as one toggles, communicating the switch in polarity."

Was er noch ausgelassen hat ist der Umstand, dass man drei Zustände hat: 1. nicht sortiert, zweitens aufsteigend sortiert, dritten absteigend sortiert. Bei einem Toggle-Button hat man aber eigentlich nur zwei. Das macht die Sache hier noch verwirrender, denn der eine oder andere Nutzer könnte versuchen, durch erneutes Klicken des Buttons den ursprünglichen Zustand wieder herzustellen (was bei vielen Button ja geht: wenn ich in einen Raum komme, ist das Licht ja nicht mittel und ich kann mit dem Schalter dann auch nicht nur zwischen ganz hell und ganz dunkel wählen. Viel mehr ist das Licht an oder aus und ich kann den Zustand wechseln mit einem Klick und mit zwei Klicks zum Ursprung zurück - intuitiv ist das alles nicht so wirklich, aber ich vermute bei vielen erlernt. Einen Reset bekomme ich praktisch nur durch einen Reload der Seite hin, was ich ziemlich unbefriedigend finde - aber manchmal stößt man auch an Grenzen).

Weiteres Problem: was in der Kopfzeile steht wird Screenreadern bei jeder zugeordneten Zelle vorgelesen, meiner Meinung nach auch das Label (müsste ich noch mal nachforschen, vielleicht weiß @Gunnar Bittersmann auch mehr). Das bedeutet, dass bei jedem Wert in dieser Spalte mit ausgegeben wird, dass nach dieser Spalte aufsteigend oder absteigend sortiert wurde - dem einen wird es helfen, das noch mal zu hören, den nächsten nerven. Hier würde ich aus de Bauch raus für diejenigen entscheiden, die die Hilfe brauchen. Aber man sollte die Texte daher auch so kurz wie möglich lassen und ich würde das, was Heydon empfiehlt an dieser Stelle vielleicht nicht umsetzen:

aria-label={`sort by ${header} in ${this.state.sortDir !== 'ascending' ? 'ascending' : 'descending'} order`}  

Aber vielleicht weiß er, dass das aria-label nicht jedesmal mitgelesen wird. Sein Text enthält dazu keinen Hinweis (oder ich habe den überlesen).

Marc