hmm: Suche einen Sorting-Button bzw. ein Sorting Icon

0 71

Suche einen Sorting-Button bzw. ein Sorting Icon

hmm
  • css
  • html
  1. 2
    Gunnar Bittersmann
    1. 0
      marctrix
  2. 1
    JürgenB
    1. 0
      marctrix
      1. 0
        JürgenB
        • barrierefreiheit
        • css
        • html
        1. 0
          JürgenB
        2. 0
          marctrix
          1. 0
            JürgenB
            1. 0
              JürgenB
              1. 0
                Matthias Apsel
                1. 0
                  JürgenB
                  1. 0
                    Matthias Apsel
                    1. 0
                      JürgenB
                      1. 0
                        Matthias Apsel
            2. 0
              marctrix
              1. 0
                marctrix
                1. 0
                  JürgenB
                  1. 0
                    marctrix
                    1. 0
                      JürgenB
                      1. 0
                        marctrix
                        1. 0
                          JürgenB
                          1. 0
                            marctrix
                            1. 0
                              JürgenB
                              1. 0
                                marctrix
                                1. 0
                                  JürgenB
                                  1. 0
                                    marctrix
                                    1. 0
                                      JürgenB
                                      1. 0
                                        marctrix
                                        1. 0
                                          JürgenB
                                      2. 0
                                        Matthias Apsel
                                        1. 0
                                          JürgenB
                                          1. 0
                                            Matthias Apsel
                                            1. 0
                                              JürgenB
                                              1. 0
                                                Matthias Apsel
                              2. 1
                                Gunnar Bittersmann
                                1. 1
                                  JürgenB
  3. 1
    Gunnar Bittersmann
    • barrierefreiheit
    • css
    • html
    1. 0
      JürgenB
      1. 0
        Gunnar Bittersmann
        1. 1
          JürgenB
          1. 0
            marctrix
  4. 0
    hmm
    1. 0
      hmm
      1. 0
        Der Martin
        • css
        • html
        • javascript
        1. 0
          Gunnar Bittersmann
          • javascript
        2. 0
          marctrix
      2. 1
        Gunnar Bittersmann
        • html
      3. 0
        JürgenB
  5. 0
    DevMat
    1. 1
      Gunnar Bittersmann
    2. 1
      Der Martin
  6. 0
    hmm
  7. 0

    Jetzt brauch ich außerdem noch eine Sortierungsidee, weil mein REST nur vorsortiert

    hmm
    1. 0
      dedlfix
      1. 0
        hmm
        1. 0
          dedlfix
          1. 0
            hmm
            1. 0
              Gunnar Bittersmann
              • javascript
              1. 0
                hmm
                1. 2
                  JürgenB
                  1. 0
                    hmm
                    1. 1
                      JürgenB
                      1. 1
                        Gunnar Bittersmann
                2. 1
                  Rolf B
                  1. 0
                    hmm
                  2. 0
                    Gunnar Bittersmann
                    1. 0
                      Rolf B
                      1. 0
                        Gunnar Bittersmann
                        1. 0
                          Mitleser
                        2. 0
                          Rolf B

Hallo,

ich brauche einen Button für mein Sorting. Die Funktionalität habe ich. Jetzt suche ein CSS Code oder einen HTML / Angular Button der einen Pfeil nach unten anzeigt und bei erneutem Klick einen Pfeil nach oben (oder ähnliches).

Kennt ihr eine Quelle dafür?

akzeptierte Antworten

  1. @@hmm

    ich brauche einen Button für mein Sorting. Die Funktionalität habe ich. Jetzt suche ein CSS Code oder einen HTML / Angular Button der einen Pfeil nach unten anzeigt und bei erneutem Klick einen Pfeil nach oben (oder ähnliches).

    Dürfen es Zeichen sein?

    ▲ U+25B2 black up-pointing triangle
    ▼ U+25BC black down-pointing triangle

    ↑ U+2191 upwards arrow
    ↓ U+2193 downwards arrow

    ⬆︎ U+2B06 upwards black arrow
    ⬇︎ U+2B07 downwards black arrow

    Ansonsten wäre SVG Mittel der Wahl.

    LLAP 🖖

    --
    „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
    „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

    —Marc-Uwe Kling
    1. Hej Gunnar,

      ich brauche einen Button für mein Sorting.

      Hinweis dazu: Wir (Zach Leatherman, Charlie Owen und ich) haben das Thema im Accessibility Club in Düsseldorf letzten Mai durchgekaut. Grundlage war die inklusive Tabellen-Komponente von Heydon Pickering, die gut funktioniert bis auf eben jene Icons (Heydon zu den Icons: "Ya, they're shit). Man weiß schließlich nicht, zeigt das Icon nun an, in welche Richtung bereits sortiert ist (Zustandsbeschreibung) oder in welche Richtung sortiert wird, wenn man den Button drückt (Funktionsbeschreibung).

      Daher herrschte schnell Einigkeit darüber, dass Icons ohne Beschriftung Sch... sind.

      Marc

      --
      Ceterum censeo Google esse delendam
  2. Hallo,

    hier sind nicht nur Button und Symbol, sondern sofort noch der Sortierer:

    https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Tabellen_dynamisch_sortieren

    Gruß
    Jürgen

    1. Hej JürgenB,

      hier sind nicht nur Button und Symbol, sondern sofort noch der Sortierer:

      https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Tabellen_dynamisch_sortieren

      Hier ist zwar auch nicht klar, welches Symbol was bedeutet, es lässt sich aber erlernen. So etwas halte ich für Seiten, die man häufiger nutzt für einiger maßen geeignet. Was noch fehlt ist eine Beschriftung für Leute, die die Buttons nicht sehen.

      Denn egal ob der B Button gedrückt ist oder nicht und in welcher Reihenfolge sortiert wird, die Beschriftung lautet stets "Sortiere aufsteigend nach... Sortiere aufsteigend nach..." - sollte leicht anzupassen sein - leider nur für Menschen mit assistiere Technologie. Wäre schön, wenn das zusätzlich noch wenigstens in einem Tootltipp ausgegeben würde. Dann hätten zwar immer noch sehr viele Menschen nichts von dem Hinweis, aber viele hätten den auch schon mal…

      Marc

      --
      Ceterum censeo Google esse delendam
      1. Hallo Marc,

        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.

        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?

        Gruß
        Jürgen

        1. Hallo,

          ich zeige jetzt den title auch bei focus an. Nur für Touchdevices habe ich noch keine Idee.

          Gruß
          Jürgen

        2. 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

          --
          Ceterum censeo Google esse delendam
          1. Hallo Marc,

            die Icons zeigen an, ob und wie sortiert wurde. Wie sortiert wird, wird z.Zt. im title und im Text für Screenreader angezeigt.

            • Bei Mausdrüber wird der title angezeigt.
            • Bei focus wird der title inzwischen auch angezeigt.
            • Bei Touch-Hold wird der title angezeigt (to do).
            • Im title steht, ob auf- oder absteigend sortiert wird.

            Die Alternative wäre, nicht die Spaltenüberschrift als Buttonbeschriftung zu nehmen, sondern ein „Sortiere aufsteigend“ bzw. „Sortiere absteigend“, und die Spaltenüberschrift zu lassen:

            <th>
              <button>Sortiere aufsteigend</button>
              <p>Spaltenüberschrift △▽</p>
            </th>
            

            Aber das verändert das Layout der Tabellenüberschrift. Dafür muss man eigentlich nichts mehr für Maus- Tastatur-, Touch- oder Screenreader-Nutzer machen.

            Momentan tendiere ich zur ersten Variante, bei der ich noch ein touch-hold programmieren muss.

            Gruß
            Jürgen

            1. Hallo ,

              die Icons zeigen an, ob und wie sortiert wurde. Wie sortiert wird, wird z.Zt. im title und im Text für Screenreader angezeigt.

              • Bei Mausdrüber wird der title angezeigt.
              • Bei focus wird der title inzwischen auch angezeigt.
              • Bei Touch-Hold wird der title angezeigt (to do).
              • Im title steht, ob auf- oder absteigend sortiert wird.

              ich habe jetzt mal versucht, auch Touch-Hold zu implementieren.

              Könnt ihr euch mal meine Testversion ansehen? Vor allem eine Rückmeldung aus dem Android-Lager wäre hilfreich für mich.

              Ich habe noch ein Problem mit der Positionierung des Tooltips. In der jetzigen Version wird es vertikal etwas oberhalb des Sortier-Buttons und horizontal zentriert angezeigt. Schöner wäre natürlich, es in der Nähe des Sortier-Buttons zu zeigen, aber dann besteht das Problem, dass es rechts aus dem Viewport geschoben wird. Gibt es in css so etwas wie max-right?

              Gruß
              Jürgen

              1. Hallo JürgenB,

                ich habe jetzt mal versucht, auch Touch-Hold zu implementieren.

                Könnt ihr euch mal meine Testversion ansehen? Vor allem eine Rückmeldung aus dem Android-Lager wäre hilfreich für mich.

                Das Sortieren geht einwandfrei, ein Tooltip wird nicht angezeigt (Firefox-Rocket).

                Weitere Browser könnten folgen.

                Gibt es in css so etwas wie max-right?

                Ist mir nicht bekannt.

                Bis demnächst
                Matthias

                --
                Du kannst das Projekt SELFHTML unterstützen,
                indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
                1. Hallo Matthias,

                  hast du auch den Finger eine halbe Sekunde auf dem Sortier-Button gelassen?

                  Wird bei Tab-Hold sortiert?

                  Gruß
                  Jürgen

                  1. Hallo JürgenB,

                    hast du auch den Finger eine halbe Sekunde auf dem Sortier-Button gelassen?

                    Der Tooltip ist imho gut positioniert. Ich habe nur den Eindruck, dass man grade eben nicht die Dreiecke länger drücken muss, sondern die Kopfzellen. Sie bekommen dann die Focus-outline.

                    Funktioniert im chrome, ff und im samsung-Browser.

                    Wird bei Tab-Hold sortiert?

                    nein.

                    Bis demnächst
                    Matthias

                    --
                    Du kannst das Projekt SELFHTML unterstützen,
                    indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
                    1. Hallo Matthias,

                      Hallo JürgenB,

                      hast du auch den Finger eine halbe Sekunde auf dem Sortier-Button gelassen?

                      sollte ich die Verzögerungszeit auf 0,3 Sekunden reduzieren?

                      Der Tooltip ist imho gut positioniert. Ich habe nur den Eindruck, dass man grade eben nicht die Dreiecke länger drücken muss, sondern die Kopfzellen. Sie bekommen dann die Focus-outline.

                      stimmt. Die Dreiecke sind im ::after und werden da wohl von der Browsern unterschiedlich gesehen.

                      Funktioniert im chrome, ff und im samsung-Browser.

                      das beruhigt mich. Ich hatte einen Fehler im IOS-Safari, die suche war recht zäh. Androiden habe ich nur bei Besuch und dann auch nur für schnelle Tests.

                      Wird bei Tab-Hold sortiert?

                      nein.

                      OK.

                      Danke für die Hilfe.

                      Was meinst du? Soll ich das für den Wiki-Sortierer übernehmen?

                      Gruß
                      Jürgen

                      1. Hallo JürgenB,

                        hast du auch den Finger eine halbe Sekunde auf dem Sortier-Button gelassen?

                        sollte ich die Verzögerungszeit auf 0,3 Sekunden reduzieren?

                        Ohne die Info, dass auf diese Weise weitere Informationen erhältlich sind, kommt man wohl nicht auf die Idee, seinen Finger länger auf den Tabellenköpfen ruhen zu lassen.

                        Danke für die Hilfe.

                        gern.

                        Was meinst du? Soll ich das für den Wiki-Sortierer übernehmen?

                        Im Moment sehe ich den Mehrwert nicht so richtig.

                        Bis demnächst
                        Matthias

                        --
                        Du kannst das Projekt SELFHTML unterstützen,
                        indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
            2. Hej JürgenB,

              die Icons zeigen an, ob und wie sortiert wurde. Wie sortiert wird, wird z.Zt. im title und im Text für Screenreader angezeigt.

              • Bei Mausdrüber wird der title angezeigt.
              • Bei focus wird der title inzwischen auch angezeigt.
              • Bei Touch-Hold wird der title angezeigt (to do).
              • Im title steht, ob auf- oder absteigend sortiert wird.

              Komisch, ich dachte, ich hätte schon drauf geantwortet?!? - Um es kurz zu machen. Das ist schon ziemlich gut, vermutlich sogar ausreichend. Wichtig ist einfach, dass jeder Nutzer weiß, was ist gerade Sache (Status) und was passiert, wenn ich den Knopf drücke. Für Blinde ist das recht einfach durch entsprechende Texte. Dir Frage ist nur, wie man diese Sehenden präsentiert, insbesondere solchen, die die Komponente nicht mit der Maus bedienen, sondern per Tastatur oder (kommt gerade, Apple beginnt damit die Bedienung der Geräte mit Sprache zu ermöglichen) ohne ein Element zu hovern oder zu fokussieren.

              Mir fällt dazu nichts ein, als einen Text dauerhaft für alle sichtbar machen, der etwa so heißt: "Tabelle absteigend sortiert nach den Werten dieser Spalte - hier klicken für eine Umkehrung der Sortierreihenfolge"

              Wie man das optisch umsetzen soll? - Leider habe ich überhaupt keine Idee. - Es wäre für Sehende schon überladen, wie viel mehr für Blinde, die das dann bei jedem Wert mit vorgelesen bekommen…

              Daher würde ich auf den langen Text für Sehende zu verzichten und ich meine zwei Dinge sprechen dafür:

              1. Ein klick auf den Button führt sofort sichtbar zu einer Aktion (trifft für Blinde nicht zu).
              2. Sortieren macht nur Sinn, wenn ich in der Lage bin, eine Reihe zu erkennen. Dann habe ich auch die Möglichkeit zu überprüfen, ob aufsteigend oder absteigend sortiert wurde (auch diese Möglichkeit haben Blinde nicht)

              Wie also die Button für Menschen zugänglich machen, welche nicht sehen können?

              Bin da im Moment etwas ratlos…

              Vielleicht kann @Gunnar Bittersmann mal in die Runde fragen, ob Texte, die mit aria-labeldby oder aria-describedby verknüpft werden, auch bei jeder Tabellenzelle vorgelesen werden. Wenn nicht, würde ich die Hinweistexte für Blinde genau so einbinden - also mit aria-labeldby.

              Marc

              --
              Ceterum censeo Google esse delendam
              1. Hej marctrix,

                Wie also die Button für Menschen zugänglich machen, welche nicht sehen können?

                Bin da im Moment etwas ratlos…

                Gut, dass Momente vorüber gehen. Musste erst in der Runde nachfragen, dabei wusste ich das eigentlich schon.

                Texte im th gibt man in einer für Sehende sinnvollen Kurzfassung an (z.B. als SVG oder so wie bereits hie besprochen)– die lange Version löst man mittels aber-Attribut auf, das Screenreader beim Vorlesen der th ausgeben – aber später beim Vorlesen der Zellen der betreffenden Spalte nicht mehr. Eine sinnvolle Auszeichnung sähe also beispielsweise so aus (vielleicht magst du das einbauen, @JürgenB):

                <th abbr="Tabelle ist nach dieser Spalte aufsteigend sortiert">
                  Name <button>absteigend nach Name sortieren</button>
                </th>
                

                Marc

                --
                Ceterum censeo Google esse delendam
                1. Hallo Marc,

                  ich sehe mir das mal an. Ich hoffe, das Layout der th wird nicht „gesprengt“.

                  Gruß
                  Jürgen

                  1. Hej JürgenB,

                    ich sehe mir das mal an. Ich hoffe, das Layout der th wird nicht „gesprengt“.

                    Durch abbr doch nicht…

                    Marc

                    --
                    Ceterum censeo Google esse delendam
                    1. Hallo Marc,

                      ich sehe mir das mal an. Ich hoffe, das Layout der th wird nicht „gesprengt“.

                      Durch abbr doch nicht…

                      <th abbr="Tabelle ist nach dieser Spalte aufsteigend sortiert">
                        Name <button>absteigend nach Name sortieren</button>
                      </th>
                      

                      aber durch den zusätzlichen Text im und vor dem Button.

                      Gruß
                      Jürgen

                      1. Hej JürgenB,

                        ich sehe mir das mal an. Ich hoffe, das Layout der th wird nicht „gesprengt“.

                        Durch abbr doch nicht…

                        <th abbr="Tabelle ist nach dieser Spalte aufsteigend sortiert">
                          Name <button>absteigend nach Name sortieren</button>
                        </th>
                        

                        aber durch den zusätzlichen Text im und vor dem Button.

                        Und „Sortierung umkehren (absteigend)“ - ist ein paar Zeichen kürzer. Oder eben doch wieder ein Icon. Wie gesagt nicht ideal aber für sehende finde ich das vertretbar. Für blinde haben wir ja jetzt eine gute Lösung.

                        Marc

                        --
                        Ceterum censeo Google esse delendam
                        1. Hallo Marc,

                          meine aktuelle Testversion sieht jetzt so aus.

                          Gruß
                          Jürgen

                          1. Hej JürgenB,

                            meine aktuelle Testversion sieht jetzt so aus.

                            Ist das echt schon eine Woche her? - Entschuldige bitte die späte Rückmeldung…

                            Ich habe eigentlich nur noch zwei Sachen zu bemeckern:

                            Du hast folgenden Button:

                            <button type="button" class="sortbutton sortedasc" aria-current="true">
                              <span class="visually-hidden">Sortiere aufsteigend nach </span>
                              <span class="visually-hidden">Sortiere absteigend nach </span>
                              Vorsilbe
                            </button>
                            
                            1. "Sortiere aufsteigend nach" und "Sortiere absteigend nach" wird blinden immer vorgelesen, egal wodrauf der Button steht. Sollte natürlich nur das jeweils richtige sein.
                            2. aria-current markiert ein Element aus einer Reihe von gleichen Elementen als "das Aktuelle". Du hast aber nur einen button in dem th – korrekt wäre IMHO das aria-current="true" für die th zu setzen, wobei ich das für überflüssig halte. Für Blinde und Sehende hast du inzwischen genug Hinweise eingebaut und ich weiß jetzt aus dem Kopf nicht, ob es nicht schadet. Die erste aria-Regel lautet: benutze kein aria 😉

                            Wer mal Zeit hat: Eric Eggert fragt (auf english): aria serious?

                            Marc

                            --
                            Ceterum censeo Google esse delendam
                            1. Hallo Marc,

                              meine aktuelle Testversion sieht jetzt so aus.

                              Ich habe eigentlich nur noch zwei Sachen zu bemeckern:

                              Du hast folgenden Button:

                              <button type="button" class="sortbutton sortedasc" aria-current="true">
                                <span class="visually-hidden">Sortiere aufsteigend nach </span>
                                <span class="visually-hidden">Sortiere absteigend nach </span>
                                Vorsilbe
                              </button>
                              
                              1. "Sortiere aufsteigend nach" und "Sortiere absteigend nach" wird blinden immer vorgelesen, egal wodrauf der Button steht. Sollte natürlich nur das jeweils richtige sein.

                              Einer der beiden Texte wird per css/Javascript mit display: none; versehen. Wird er dann trotzdem vorgelesen?

                              1. aria-current markiert ein Element aus einer Reihe von gleichen Elementen als "das Aktuelle". Du hast aber nur einen button in dem th – korrekt wäre IMHO das aria-current="true" für die th zu setzen, wobei ich das für überflüssig halte. Für Blinde und Sehende hast du inzwischen genug Hinweise eingebaut und ich weiß jetzt aus dem Kopf nicht, ob es nicht schadet. Die erste aria-Regel lautet: benutze kein aria 😉

                              Das aria-current habe ich entfernt.

                              Gruß
                              Jürgen

                              1. Hej JürgenB,

                                <button type="button" class="sortbutton sortedasc" aria-current="true">
                                  <span class="visually-hidden">Sortiere aufsteigend nach </span>
                                  <span class="visually-hidden">Sortiere absteigend nach </span>
                                  Vorsilbe
                                </button>
                                
                                1. "Sortiere aufsteigend nach" und "Sortiere absteigend nach" wird blinden immer vorgelesen, egal wodrauf der Button steht. Sollte natürlich nur das jeweils richtige sein.

                                Einer der beiden Texte wird per css/Javascript mit display: none; versehen. Wird er dann trotzdem vorgelesen?

                                Nein, das sorgt dafür, dass der Text nicht mehr dargestellt wird. Nicht optisch, nicht akustisch, überhaupt nicht. 😉

                                Besser fände ich nach einigem Nachdenken: ohne JavaScript "Sortiere nach Vorsilbe" und mit Java Script sortiere <span>aufsteigend | absteigend</span> nach Vorsilbe"…

                                Macht dann immer Sinn, aber mit JavaScript ist es besser (progressive enhancement)…

                                Das ist dann ein echtes best practice example!

                                Marc

                                --
                                Ceterum censeo Google esse delendam
                                1. Hallo Marc,

                                  <button type="button" class="sortbutton sortedasc" aria-current="true">
                                    <span class="visually-hidden">Sortiere aufsteigend nach </span>
                                    <span class="visually-hidden">Sortiere absteigend nach </span>
                                    Vorsilbe
                                  </button>
                                  
                                  1. "Sortiere aufsteigend nach" und "Sortiere absteigend nach" wird blinden immer vorgelesen, egal wodrauf der Button steht. Sollte natürlich nur das jeweils richtige sein.

                                  Einer der beiden Texte wird per css/Javascript mit display: none; versehen. Wird er dann trotzdem vorgelesen?

                                  Nein, das sorgt dafür, dass der Text nicht mehr dargestellt wird. Nicht optisch, nicht akustisch, überhaupt nicht. 😉

                                  aber das ist doch das gewünschte. Es wird der Text eingeblendet, der die Sortierrichtung anzeigt.

                                  Besser fände ich nach einigem Nachdenken: ohne JavaScript "Sortiere nach Vorsilbe" ...

                                  das müsste dann aber vom Seitenautor in den HTML-Quelltext gesetzt werden. Für das Wiki-Beispiel ist das aber nicht von Interesse, da es keinen Serverfallback gibt. Ohne Javascript ist es einfach nur eine statische Tabelle.

                                  ...und mit Java Script sortiere <span>aufsteigend | absteigend</span> nach Vorsilbe"…

                                  also so, wie es ist, oder soll der Text aufsteigend | absteigend immer angezeigt werden?

                                  Gruß
                                  Jürgen

                                  1. Hej JürgenB,

                                    <button type="button" class="sortbutton sortedasc" aria-current="true">
                                      <span class="visually-hidden">Sortiere aufsteigend nach </span>
                                      <span class="visually-hidden">Sortiere absteigend nach </span>
                                      Vorsilbe
                                    </button>
                                    
                                    1. "Sortiere aufsteigend nach" und "Sortiere absteigend nach" wird blinden immer vorgelesen, egal wodrauf der Button steht. Sollte natürlich nur das jeweils richtige sein.

                                    Einer der beiden Texte wird per css/Javascript mit display: none; versehen. Wird er dann trotzdem vorgelesen?

                                    Nein, das sorgt dafür, dass der Text nicht mehr dargestellt wird. Nicht optisch, nicht akustisch, überhaupt nicht. 😉

                                    aber das ist doch das gewünschte. Es wird der Text eingeblendet, der die Sortierrichtung anzeigt.

                                    Stimmt. Mir war das vorher nur nicht bewusst und im letzten Post habe ich einfach Deine Frage beantwortet. - Alles gut so!

                                    ...und mit Java Script sortiere <span>aufsteigend | absteigend</span> nach Vorsilbe"…

                                    also so, wie es ist, oder soll der Text aufsteigend | absteigend immer angezeigt werden?

                                    Nein, der senkrechte Strich steht für "oder" - ich habe stillschweigend eine Fallunterscheidung vorausgesetzt - so wie jetzt.

                                    Du kannst das bestehende auch lassen, fand meinen Vorschlag aber besser, weil ich mir nicht klar gemacht habe, dass der ganze Button nicht da ist, wenn JS nicht aktiv ist.

                                    Mach nichts mehr da dran, ist jetzt gut so wie es ist!

                                    Marc

                                    --
                                    Ceterum censeo Google esse delendam
                                    1. Hallo Marc,

                                      ich habe das Wiki-Tutorial überarbeitet. Dir, Gunnar und Matthias danke für die Hilfe.

                                      Gruß
                                      Jürgen

                                      1. Hej JürgenB,

                                        ich habe das Wiki-Tutorial überarbeitet. Dir, Gunnar und Matthias danke für die Hilfe.

                                        Sehr gut! Das dürfte wohl die beste Frei zugängliche deutschsprachige Anleitung sein, um sortierbare Tabellen zu erstellen!

                                        Marc

                                        --
                                        Ceterum censeo Google esse delendam
                                        1. Hallo Marc,

                                          ich habe das Wiki-Tutorial überarbeitet. Dir, Gunnar und Matthias danke für die Hilfe.

                                          Sehr gut! Das dürfte wohl die beste Frei zugängliche deutschsprachige Anleitung sein, um sortierbare Tabellen zu erstellen!

                                          Danke.

                                          Gruß
                                          Jürgen

                                      2. Hallo JürgenB,

                                        ich habe das Wiki-Tutorial überarbeitet. Dir, Gunnar und Matthias danke für die Hilfe.

                                        Ich würde gern noch ein bisschen die Formatierung anpassen, falls du nichts dagegen hast.

                                        Bis demnächst
                                        Matthias

                                        --
                                        Du kannst das Projekt SELFHTML unterstützen,
                                        indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
                                        1. Hallo

                                          ich habe das Wiki-Tutorial überarbeitet. Dir, Gunnar und Matthias danke für die Hilfe.

                                          Ich würde gern noch ein bisschen die Formatierung anpassen, falls du nichts dagegen hast.

                                          nur zu, die Wiki-Syntax ist eh nicht mein Ding.

                                          Gruß
                                          Jürgen

                                          1. Hallo JürgenB,

                                            nur zu, die Wiki-Syntax ist eh nicht mein Ding.

                                            du musst dann allerdings bei Änderungen aufpassen, dass du dann keine kompletten Codes von dir wieder reinkopierst (Einrückung, Leerzeichen vor und nach "<", …)

                                            Bis demnächst
                                            Matthias

                                            --
                                            Du kannst das Projekt SELFHTML unterstützen,
                                            indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
                                            1. Hallo Matthias,

                                              du musst dann allerdings bei Änderungen aufpassen, dass du dann keine kompletten Codes von dir wieder reinkopierst (Einrückung, Leerzeichen vor und nach "<", …)

                                              ich rücke immer mit dem TAB ein und stelle die TAB-Weite aber dann auf 2. Das Wiki nimmt doch für Code ein pre. Wäre da pre { -moz-tab-size: 2; tab-size: 2; } statt tab-size: 4 eine Lösung? Oder kollidiert das dann an anderer Stelle?

                                              Gruß
                                              Jürgen

                                              1. Hallo JürgenB,

                                                ich rücke immer mit dem TAB ein und stelle die TAB-Weite aber dann auf 2. Das Wiki nimmt doch für Code ein pre. Wäre da pre { -moz-tab-size: 2; tab-size: 2; } statt tab-size: 4 eine Lösung? Oder kollidiert das dann an anderer Stelle?

                                                hab ich mal so umgesetzt.

                                                Bis demnächst
                                                Matthias

                                                --
                                                Du kannst das Projekt SELFHTML unterstützen,
                                                indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
                              2. @@JürgenB

                                Einer der beiden Texte wird per css/Javascript mit display: none; versehen. Wird er dann trotzdem vorgelesen?

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

                                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.

                                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.

                                LLAP 🖖

                                --
                                „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
                                „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

                                —Marc-Uwe Kling
                                1. 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

  3. @@hmm

    Jetzt suche ein CSS Code oder einen HTML / Angular Button der einen Pfeil nach unten anzeigt und bei erneutem Klick einen Pfeil nach oben (oder ähnliches).

    Der Button sollte nicht nur einen Pfeil anzeigen, sondern auch eine Beschriftung haben, welche nicht unbedingt visuell sichtbar sein muss, aber für Nutzer assistiver Technologien wie Screenreader zugänglich sein muss.

    <button>
      <span class="visually-hidden">aufsteigend sortieren</span></button>
    

    CSS dafür: How-to: Hide content (The A11Y Project)

    Der Pfeil zeigt hier den Ist-Zustand an, die Beschriftung sagt den Folgezustand. Diese Problematik wird auch in Toggle Buttons (Inclusive Componenents) besprochen.

    LLAP 🖖

    --
    „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
    „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

    —Marc-Uwe Kling
    1. Hallo Gunnar,

      Der Button sollte nicht nur einen Pfeil anzeigen, sondern auch eine Beschriftung haben, welche nicht unbedingt visuell sichtbar sein muss, aber für Nutzer assistiver Technologien wie Screenreader zugänglich sein muss.

      <button>
        <span class="visually-hidden">aufsteigend sortieren</span></button>
      

      wie im Wiki-Artikel.

      Der Pfeil zeigt hier den Ist-Zustand an, die Beschriftung sagt den Folgezustand.

      das fehlt noch im Wiki. Kann man das „aufsteigend sortieren“ bzw. „absteigend sortieren“ auch im ::before unterbringen und dann visuell verstecken? Oder „sehen“ das Vorlesetools dann nicht?

      Gruß
      Jürgen

      1. @@JürgenB

        Kann man das „aufsteigend sortieren“ bzw. „absteigend sortieren“ auch im ::before unterbringen und dann visuell verstecken? Oder „sehen“ das Vorlesetools dann nicht?

        AFAIK lesen manche Screenreader CSS-generierten Inhalt vor, andere nicht.

        LLAP 🖖

        --
        „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
        „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

        —Marc-Uwe Kling
        1. Hallo Gunnar,

          AFAIK lesen manche Screenreader CSS-generierten Inhalt vor, andere nicht.

          OK. Dann werde ich beide Ansagen vorhalten und die nicht benötigte mit display: none ausblenden.

          Gruß
          Jürgen

          1. Hej JürgenB,

            AFAIK lesen manche Screenreader CSS-generierten Inhalt vor, andere nicht.

            OK. Dann werde ich beide Ansagen vorhalten und die nicht benötigte mit display: none ausblenden.

            Sehr gut!

            Marc

            --
            Ceterum censeo Google esse delendam
  4. danke.

    ich spreche nach klick auf den butten eine Funktion an die mir dann Sortierte Daten von meiner REST API holt. Darum reicht mir die Visualisierung.

    wenn ich das richtig verstehe, muss ich das CSS nach klick auf dem Button per javascript funktion ändern, direkt per css oder html geht das nicht?

    1. hm... aktuell würde das auf sowas hinauslaufen:

      .sort-by-asc
      {
        left: 3px;
        display: inline-block;
        width: 0;
        height: 0;
        border: solid 5px transparent;
        margin: 4px 4px 0 3px;
        background: transparent;
        border-bottom: solid 7px #F80;
        border-top-width: 0;
      }
      
      .sort-by-desc
      {
        left: 3px;
        display: inline-block;
        width: 0;
        height: 0;
        border: solid 5px transparent;
        margin: 4px 4px 0 3px;
        background: transparent;
        border-top: solid 7px #F80;
        border-bottom-width: 0;
      }
      
      
      <a class="" id="sort1" (click)='this.sortSort()'>test</a>
      
      
        count = 0;
      
        sortSort() {
          this.count = this.count + 1;
          let sortClass = "sort-by-asc";
          if( this.count % 2 == 0) {
            sortClass = "sort-by-desc";
          }
          document.getElementById("sort1" ).setAttribute("class", sortClass);
        }
      
      
      

      damit erzeuge ich sehr viel redundanten code

      1. Hallo,

        die entscheidende Anmerkung mal an den Anfang gezogen:

        damit erzeuge ich sehr viel redundanten code

        Genau das. Die CSS-Eigenschaften der beiden Klassen sind beinahe identisch, also warum nicht zusammenfassen und nur die Eigenschaften separat setzen, die tatsächlich verschieden sind?

        .sort-by-asc, .sort-by-desc
        {
          left: 3px;
          display: inline-block;
          width: 0;
          height: 0;
          border: solid 5px transparent;
          margin: 4px 4px 0 3px;
          background: transparent;
        }
        
        .sort-by-asc
        {
          border-bottom: solid 7px #F80;
          border-top-width: 0;
        }
        
        .sort-by-desc
        {
          border-top: solid 7px #F80;
          border-bottom-width: 0;
        }
        

        Damit wäre das CSS schon mal von Redundanzen befreit[1]. Sehen wir uns nun noch das Javascript an. Die Sortierrichtung (vorwärts, rückwärts) legst du mit einer Zählvariable fest, die du dann auf gerade oder ungerade abfragst. Warum das? Es ist eine binäre Entscheidung - einer von zwei Zuständen. Dazu bietet sich der boolean-Typ an.

          sortDesc = false;
        
          sortSort() {
            this.sortDesc = !this.sortDesc;
            document.getElementById("sort1" ).className =
              ( this.sortDesc ?
                "sort-by-desc" :
                "sort-by-asc");
          }
        

        Sieht doch gleich viel kompakter und übersichtlicher aus. Und gleich kommt wahrscheinlich noch der Gunnar mit seinem Mantra, doch bitte keine Maße in px anzugeben.

        So long,
         Martin

        --
        Ich stamme aus Ironien, einem Land am sarkastischen Ozean.

        1. Eine der beiden Klassen ist noch redundant; man könnte die Unterschiedung ebenso anhand von "Klasse gesetzt" bzw. "keine Klasse gesetzt" machen. Es sei denn, du hättest noch den dritten Zustand "Sortierung undefiniert". ↩︎

        1. @@Der Martin

            sortDesc = false;
          
            sortSort() {
              this.sortDesc = !this.sortDesc;
              document.getElementById("sort1" ).className =
                ( this.sortDesc ?
                  "sort-by-desc" :
                  "sort-by-asc");
            }
          

          Man muss nicht bei jedem Aufruf von sortSort das Element erneut im DOM mit document.getElementById("sort1") suchen. Raus damit aus der Funktion; vorher:

          const sort1Element = document.getElementById("sort1");
          
          function sortSort() {}
          

          oder

          const sort1Element = document.querySelector("#sort1");
          
          function sortSort() {}
          

          in der Funktion dann

          sort1Element.className =;
          

          Die Verwendung von Element.className ist immer problematisch, wenn da noch andere Klassen im Spiel sind, die man nicht überschreiben möchte.

          Stattdessen kann man besser die Methoden von Element.classList einsetzen:

          sort1Element.classList.toggle("sort-by-desc", this.sortDesc);
          sort1Element.classList.toggle("sort-by-asc", !this.sortDesc);
          

          Eine der beiden Klassen ist noch redundant; man könnte die Unterschiedung ebenso anhand von "Klasse gesetzt" bzw. "keine Klasse gesetzt" machen.

          Dann tut es Element.classList.toggle ohne den zweiten Parameter.

          Und gleich kommt wahrscheinlich noch der Gunnar mit seinem Mantra, doch bitte keine Maße in px anzugeben.

          Ehe wir an die Feinheiten gehen, sollten wir erstmal mit den Grundlagen anfangen: dem Markup.

          LLAP 🖖

          --
          „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
          „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

          —Marc-Uwe Kling
        2. Hej Der Martin,

          Genau das. Die CSS-Eigenschaften der beiden Klassen sind beinahe identisch, also warum nicht zusammenfassen und nur die Eigenschaften separat setzen, die tatsächlich verschieden sind?

          .sort-by-asc, .sort-by-desc
          

          Gute Idee! - Persönlich würde ich für so etwas den Attribut-Selektor nehmen, ist aber Geschmacksache (Klassen sind zwar performanter, doch macht das wenig aus).

          Ich finde es lesbarer mit Attribut-Selektor.

          Marc

          --
          Ceterum censeo Google esse delendam
      2. @@hmm

        <a class="" id="sort1" (click)='this.sortSort()'>test</a>
        

        Nein, einen Button. Ein a-Element ist kein Button.

        LLAP 🖖

        --
        „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
        „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

        —Marc-Uwe Kling
      3. Hallo,

        Gunnar hat dich ja schon darauf hingewiesen, das ein a-Element hier nicht geeignet ist.

        Im Tabellensortierer im Wiki sieht das (per Javascript erzeugte) HTML und CSS für den Tabellenkopf so aus:

        HTML:

        <th>
        	<span class="visually-hidden">Vorsilbe</span>
        	<button type="button" class="sortbutton unsorted" title="Sortiere nach Vorsilbe">
        		<span class="visually-hidden">Sortiere aufsteigend nach </span>
        		<span class="visually-hidden">Sortiere absteigend nach </span>Vorsilbe
        	</button>
        </th>
        

        CSS:

        .sortbutton { 
        	width:100%; 
        	height:100%; 
        	border: none; 
        	background-color: transparent; 
        	font: inherit; 
        	color: inherit; 
        	text-align: inherit; 
        	padding: 0; 
        	cursor: pointer; 
        } 
        .sortierbar thead th span.visually-hidden { 
        	position: absolute !important; 
        	clip: rect(1px, 1px, 1px, 1px) !important; 
        	padding: 0 !important; 
        	border: 0 !important; 
        	height: 1px !important; 
        	width: 1px !important; 
        	overflow: hidden !important; 
        	white-space: nowrap !important;
        } 
        .sortbutton::after { 
        	display: inline-block; 
        	letter-spacing: -.2em; 
        	margin-left:.1em; 
        	width: 1.8em;
        } 
        .sortbutton.sortedasc::after { 
        	content: "▲▽" 
        } 
        .sortbutton.sorteddesc::after { 
        	content: "△▼" 
        } 
        .sortbutton.unsorted::after { 
        	content: "△▽" 
        } 
        .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 
        }
        

        Die Buttons müssen jetzt nur noch die entsprechende Klasse unsorted, sortedasc oder sorteddesc bekommen.

        Gruß
        Jürgen

  5. Alternativ möchte ich noch vorschlagen einen font mit entsprechenden Icons zu benutzen. Ein populäres Beispiel wäre "Font Awesome" oder man baut sich einen entsprechenden Font mit einem Font-Generator und SVG-Dateien zusammen.

    Beste Grüße!

    1. @@DevMat

      Alternativ möchte ich noch vorschlagen einen font mit entsprechenden Icons zu benutzen.

      Kein guter Vorschlag. Iconfonts sind keine so gute Idee. Nicht machen!

      Ein populäres Beispiel wäre "Font Awesome" oder man baut sich einen entsprechenden Font mit einem Font-Generator und SVG-Dateien zusammen.

      Font Awesome bietet alle Icons auch als SVG an.

      LLAP 🖖

      --
      „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
      „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

      —Marc-Uwe Kling
    2. Hallo,

      Alternativ möchte ich noch vorschlagen einen font mit entsprechenden Icons zu benutzen.

      wozu das? Sind die Unicode-Symbole, die Gunnar schon rausgesucht und vorgeschlagen hat, nicht gut genug? Vor allem das erste Pärchen ist sieht sehr vertraut aus und dürfte unauffällig in die meisten Designs passen.

      Ein populäres Beispiel wäre "Font Awesome" oder man baut sich einen entsprechenden Font mit einem Font-Generator und SVG-Dateien zusammen.

      Man kann sich auch ein Feingewinde ...

      Ciao,
       Martin

      --
      Ich stamme aus Ironien, einem Land am sarkastischen Ozean.
  6. Danke, mit den Verbesserungsvorschlägen habt ihr natürlich recht.

    Ich muss das Sorting für verschiedene Spalten auf verschiedenen Seiten benutzen. Deshalb baue ich quasi ein eigenes kleines Sorting Framework, weil ich ansonsten überall den gleichen bzw ähnlichen Code hinterlege. Mit Redundanten Code meinte ich, dass meine Entscheidung das Sorting mit dem oben benannten Code zu lösen vermutlich sehr unschön ist. Ich hatte gehofft, dass mit HTML oder CSS etwas bieten kann was ohne Javascript Funktion auskommt.

  7. meine REST API schickt mir die ersten 15 Daten einer Sortierten Tabelle. Leider kommen diese 15 Daten per Liste an, so dass ich sie im Frontend neu sortieren muss.

    Die Daten liegen in einem Array datas = [] und haben die Form data={x: bla, y: blabla, z: ..., usw.}

    Jetzt überlege ich, ob ich meine Tabelle zu einer Sortierbaren Tabelle mache, mittels eines Frameworks oder ob ich eine eigene Sortierfunktion schreibe. Leider habe ich keine Ahnung wie ich eine eigene Sortierfunktion schreiben kann die meine Daten bezüglich eines Attributes von data sortiert... ich müsste datas in einem zwei dimensionalem Array speichern, aber wenn ich das mache kann ich direkt "is'n schei* code" als kommentar drüberschreiben... was denkt ihr dazu?

    1. Tach!

      meine REST API schickt mir die ersten 15 Daten einer Sortierten Tabelle. Leider kommen diese 15 Daten per Liste an, so dass ich sie im Frontend neu sortieren muss.

      Ich sehe nicht, warum die Elemente dieser Liste nicht in der Reihenfolge vorliegen, wie sie der Server aus der Datenhaltung ermittelt.

      Die Daten liegen in einem Array datas = [] und haben die Form data={x: bla, y: blabla, z: ..., usw.}

      Jetzt überlege ich, ob ich meine Tabelle zu einer Sortierbaren Tabelle mache, mittels eines Frameworks oder ob ich eine eigene Sortierfunktion schreibe. Leider habe ich keine Ahnung wie ich eine eigene Sortierfunktion schreiben kann die meine Daten bezüglich eines Attributes von data sortiert...

      Spricht etwas gegen Array.prototype.sort()?

      dedlfix.

      1. die daten von der api kommen als arraylist nicht als linkedlist, darum sind die 15 Daten leider unsortiert. Die REST API ist mit Spring Boot gebaut, da kenne ich auch keinen Weg sortierte Daten zu verschicken.

        kann ich mit Array.prototype.sort nach einem Attribute eines Elements vom Array datas sortieren?

        Das array sieht so aus: datas = [{x: a1, y: a2, z:a3, k: a4}, {x: a1, y: a2, z:a3, k: a4}, {x: a1, y: a2, z:a3, k: a4}, ...]

        Sortiert werden muss dynamisch nach x y z oder k.

        1. Tach!

          kann ich mit Array.prototype.sort nach einem Attribute eines Elements vom Array datas sortieren?

          Ja, sonst hätte ich sie nicht empfohlen. Hast du dir eine Dokumentation zu der Methode angeschaut?

          dedlfix.

          1. ich bin dabei mir die hier anzugucken:

            https://devdocs.io/javascript/global_objects/array/sort

            ich weiß immer nicht welche doku am vollständigsten ist.

            1. @@hmm

              ich weiß immer nicht welche doku am vollständigsten ist.

              MDN?

              LLAP 🖖

              --
              „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
              „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

              —Marc-Uwe Kling
              1. Danke. Eine Möglichkeit nach einem beliebigen Attribute dynamisch zu sortieren sehe ich aber nicht.

                Sowas geht da leider nicht:

                function sort(array, attribute) {
                
                 let b = []
                
                 for( a in array) {
                  b.push( a.attribute );
                 }
                
                  return b.sort();
                
                }
                
                

                eine möglichkeit den Index von attribute in array[0] zu suchen sehe ich auch nicht

                1. Hallo,

                  der Methode sort kann man als Parameter eine Vergleichsfunktion mitgeben, in der geregelt wird, wonach sortiert werden soll. Steht alles im verlinkten Wiki-Artikel.

                  Gruß
                  Jürgen

                  1. wird auf die Spalte "Eigenschaften" geklickt müsste ich eine Vergleichsfunktion mitgeben die nach datas[i].eigenschaften sortiert. Wenn ich das mit der Vergleichsfunktion richtig verstehe muss ich bei 5 zu sortierenden Spalten bei 10 Tabellen 50 unterschiedliche Vergleichsfunktionen schreiben. Richtig? Oder komme ich mit einer dynamischen Vergleichsfunktion aus?

                    1. Hallo,

                      also im Wiki-Artikel gibt es nur zwei Vergleichsfunktionen:

                      var vglFkt_s = function(a,b) { // für Strimgs
                      	return a[sorted].localeCompare(b[sorted],doclang);
                      } // vglFkt_s
                      
                      var vglFkt_n = function(a,b) { // für Zahlen
                      	return a[sorted] - b[sorted];
                      } // vglFkt_n 
                      

                      sorted ist in diesem Fall die Spaltennummer, nach der sortiert werden soll. Bei dir müsste das der Eigenschaftenname sein.

                      doclang hat den Wert

                      var doclang = document.documentElement.hasAttribute("lang") ?
                        document.documentElement.getAttribute("lang") : "de";
                      

                      Gruß
                      Jürgen

                      1. @@JürgenB

                        doclang hat den Wert

                        var doclang = document.documentElement.hasAttribute("lang") ?
                          document.documentElement.getAttribute("lang") : "de";
                        

                        Das sollte doch einfacher gehen:

                        var doclang = document.documentElement.lang || 'de';
                        

                        bzw. wenn das Script nicht (untranspiliert) auf Uralt-Browsern laufen muss:

                        const doclang = document.documentElement.lang || 'de';
                        

                        LLAP 🖖

                        --
                        „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
                        „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

                        —Marc-Uwe Kling
                2. Hallo hmm,

                  wenn Du auf Eigenschaften eines Objekts zugreifen willst, deren Namen Du erst zur Laufzeit kennst, geht das mit der Array-Notation. Das kann man auch kombinieren, falls das Objekt in einem Array steht.

                  let datas = [
                     {x: a1, y: a2, z:a3, k: a4},
                     {x: a1, y: a2, z:a3, k: a4}, 
                     {x: a1, y: a2, z:a3, k: a4}
                  ];
                  
                  let row = 1;
                  let property = "y";
                  console.log("Wert von " + property + 
                              " in Zeile " + row + 
                              " ist " + datas[row][property]);
                  

                  Eine Callback-Funktion für Sort bekommt immer zwei dieser Objekte als Parameter übergeben und muss -1, 0 oder 1 zurückgeben, je nachdem, ob Parameter 1 als kleiner, gleich oder größer angesehen werden soll als Parameter 2. Um den Propertynamen in die Callbackfunktion hineinzubekommen, gibt es den traditionellen Weg mit einer globalen Variablen (bzw. einer Eigenschaft im Objekt, wie im Wiki-Artikel), oder den modernen, funktionalen Weg mit einer Closure. Du schreibst eine Funktion, die Dir die Callback-Funktion zurückgibt:

                  function getComparerFor(property) {
                     return function(a, b) {
                        if (a[property] < b[property]) return -1;
                        if (a[property] > b[property]) return 1;
                        return 0;
                     }
                  }
                  

                  Diese Funktion gibt eine anonyme Funktion zurück, die als Sortierer dient. Der Trick ist, dass Funktionen mehr als nur Funktionen sind. Sie schließen immer auch den Kontext in sich ein (daher der Name Closure), in dem sie definiert wurden. In diesem Fall gehört dazu auch der property-Parameter und sein Wert.

                  Wenn deine Werte alphanumerisch sind, guck nochmal in den Wiki-Artikel, da wird localCompare verwendet um korrekt für die Anwendersprache zu sortieren.

                  Das verwendest Du so:

                  let sortierer = getComparerFor(sortierSpalte);
                  datas.sort(sortierer);
                  
                  // oder als Einzeiler:
                  
                  datas.sort(getComparerFor(sortierSpalte));
                  

                  wobei zu beachten ist, dass das datas-Array dabei umsortiert wird. Wenn Du die vom Server gelieferte Reihenfolge in datas beibehalten willst, musst Du datas vorher klonen. Das geht mit Array.from() - außer in Alt-Browsern, dort brauchst Du für Array.from einen Polyfill. Der im MDN ist lang, aber erfüllt die Spec. Den kannst Du zur Sicherheit einbauen (oder auf den IE pfeifen, oder eine eigene kleine Funktion zum flachen Klonen eines Arrays schreiben).

                  Das verwendest Du dann so:

                  var sortedData = Array.from(datas);
                  var sortierer = getComparerFor(sortierSpalte);
                  sortedData.sort(sortierer);
                  
                  // Oder als Einzeiler:
                  
                  var sortedData = Array.from(datas).sort(getComparerFor(sortierSpalte))
                  

                  Rolf

                  --
                  sumpsi - posui - clusi
                  1. Das ich ein Objekt wie ein Array ansprechen kann wusste ich nicht.

                    Danke. Das ist eine der hochwertigsten Beschreibungen die ich je gelesen habe!

                  2. @@Rolf B

                    console.log("Wert von " + property + 
                                " in Zeile " + row + 
                                " ist " + datas[row][property]);
                    

                    Gibt es für derartige Stringkonkatenation noch sinnvolle Anwendungen? Besser lesbarer Code:

                    console.log(
                     `Wert von ${property} in Zeile ${row} ist ${datas[row][property]}`
                    );
                    

                    LLAP 🖖

                    --
                    „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
                    „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

                    —Marc-Uwe Kling
                    1. Hallo Gunnar,

                      auf meinem Schirm steht immer noch der Internet Explorer 11. Der kann keine Template Strings. Und man kann sie auch nicht polyfillen.

                      Rolf

                      --
                      sumpsi - posui - clusi
                      1. @@Rolf B

                        auf meinem Schirm steht immer noch der Internet Explorer 11. Der kann keine Template Strings. Und man kann sie auch nicht polyfillen.

                        console.log(`…`)

                        Du entwickelst mit dem IE 11? Du Armer!

                        LLAP 🖖

                        --
                        „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
                        „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

                        —Marc-Uwe Kling
                        1. auf meinem Schirm steht immer noch der Internet Explorer 11. Der kann keine Template Strings. Und man kann sie auch nicht polyfillen.

                          console.log(`…`)

                          Du entwickelst mit dem IE 11? Du Armer!

                          Möchte / muss man den IE 11 unterstützen, so kann es tatsächlich vorkommen, dort auch mal einen Debug absetzen zu wollen! Oh Wunder!

                        2. Hallo Gunnar,

                          Du entwickelst mit dem IE 11?

                          Für. Nicht mit. Hoffentlich nicht mehr lange.

                          Rolf

                          --
                          sumpsi - posui - clusi