Suche einen Sorting-Button bzw. ein Sorting Icon

[JürgenB]

Hallo Gunnar,

Was mit display: none oder visibility: hidden ausgeblendet wird, wird weder auf dem Bildschirm ausgegeben noch von Screenreadern vorgelesen.

OK.

Aber mit JavaScript auf display: none setzen? Das hidden-Attribut bzw. die entsprechende hidden-Eigenschaft existiert. Diese sollte bevorzugt geändert werden, nicht die Stil-Eigenschaft.

der Sortierer setzt wegen der Sortiersymbole schon Klassen (unsorted, sortedasc, sorteddesc), daher nutze ich diese Klassen auch zum Ausblenden des nicht benötigten Textes:

.sortbutton.sortedasc > span.visually-hidden:first-of-type { display: none } ' ;
.sortbutton.sorteddesc > span.visually-hidden:last-of-type { display: none } ' ;
.sortbutton.unsorted > span.visually-hidden:last-of-type { display: none } ' ;

Das Attribut bietet sich auch für den Button an (und alle anderen, die ohne JavaScript keine Funktion haben: <button hidden="">. Mit JavaScript HTMLButtonElement.hidden = false setzen und damit den Button erst dann anzeigen, wenn er auch funktioniert.

Da die Sortierbuttons erst mit Javascript erzeugt werden, muss da ohne Javascript nichts versteckt werden.

Bei einem servergestütztem Sortierer muss auch nichts versteckt werden, da hier das Serverscript ja das benötigte HTML erzeugen kann.

Gruß
Jürgen