Linuchs: Tabelle auf Smartphone nicht sortierbar

problematische Seite

Moin,

auf meinen Seiten habe ich sortierbare Tabellen. Nun stelle ich fest, dass die auf (meinem Android) Smartphone nicht sortierbar sind.

Merkwürdig, ich liefere an Rechner und Telefone doch denselben Code aus. Was kann der Grund sein?

Linuchs

  1. problematische Seite

    Hi,

    auf meinen Seiten habe ich sortierbare Tabellen. Nun stelle ich fest, dass die auf (meinem Android) Smartphone nicht sortierbar sind.

    Nicht nachvollziehbar. Weder mit dem Android-Browser noch mit dem Firefox macht das Sortieren Probleme.

    cu,
    Andreas a/k/a MudGuard

    1. problematische Seite

      Nicht nachvollziehbar.

      Dann ist es vielleicht das hoch betagte Alter meines Smartphones samt Betriebssystem von fünf Jahren.

      Linuchs

      1. problematische Seite

        Hallo Linuchs,

        Nicht nachvollziehbar.

        Dann ist es vielleicht das hoch betagte Alter meines Smartphones samt Betriebssystem von fünf Jahren.

        mit Sicherheit.

        Bis demnächst
        Matthias

        --
        Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
  2. problematische Seite

    @@Linuchs

    auf meinen Seiten habe ich sortierbare Tabellen. Nun stelle ich fest, dass die auf (meinem Android) Smartphone nicht sortierbar sind.

    Merkwürdig, ich liefere an Rechner und Telefone doch denselben Code aus. Was kann der Grund sein?

    In Ermangelung eines Testgerätes kann ich dir dazu wenig sagen. Aber:

    1. Was soll der grüne Balken „Termin ist vergangen‟, der da fix positioniert über allem schwebt?

    2. <a id="x1_0" href="#" class="sortheader" onclick="ts_resortTable(document.getElementById('x1_0'), 0);return false;">

    Nein. Bitte nicht so.

    a-Elemente dienen für Links zu anderen Ressourcen oder anderen Bereichen auf der Seite. <a href="#"> ist ein Link zum Seitenanfang. Wenn du nicht zum Seitenanfang springen willst, ist <a href="#"> grundsätzlich falsch.

    Für Aktionen auf derselben Seite dienen button-Elemente. (Die lassen sich problemlos so stylen, dass sie keinen Rahmen und keine Hintergrundfarbe haben.

    Manche mögen sagen: Ist doch scheißegal. Nein, das ist es nicht. Nicht für Nutzer, die den Inhalt nicht visuell erfassen, sondern bspw. per Screenreader.

    LLAP 🖖

    --
    “You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
    Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
    1. problematische Seite

      Hallo,

      1. <a id="x1_0" href="#" class="sortheader" onclick="ts_resortTable(document.getElementById('x1_0'), 0);return false;">

      Nein. Bitte nicht so.

      a-Elemente dienen für Links zu anderen Ressourcen oder anderen Bereichen auf der Seite. <a href="#"> ist ein Link zum Seitenanfang. Wenn du nicht zum Seitenanfang springen willst, ist <a href="#"> grundsätzlich falsch.

      Für Aktionen auf derselben Seite dienen button-Elemente. (Die lassen sich problemlos so stylen, dass sie keinen Rahmen und keine Hintergrundfarbe haben.

      und beim Tabellensortierer braucht man keine zusätzlichen Elemente, man kann das Click-Event auch direkt den TDs im THEAD geben.

      Gruß
      Jürgen

      1. problematische Seite

        @@JürgenB

        Für Aktionen auf derselben Seite dienen button-Elemente. (Die lassen sich problemlos so stylen, dass sie keinen Rahmen und keine Hintergrundfarbe haben.

        und beim Tabellensortierer braucht man keine zusätzlichen Elemente, man kann das Click-Event auch direkt den TDs im THEAD geben.

        Nein.

        Zum einen haben tds im thead i.A. nichts zu suchen; für Kopfzellen sind th-Elemente da. Hatte ich beim ersten Code-Review glatt übersehen.

        Zum anderen müsste man das th-Element so hinbekommen, dass es funktional als Button dienen könnte: Angefangen mit tabindex="0", um es per Tastatur erreichbar zu machen. Für AT als Clickbutton kennzeichnen: role="button" – äh nein, geht ja gar nicht. Dann wäre th ja keine Tabellenzelle mehr. Man braucht also auf jeden Fall ein Kindelement in den ths. Dann sollte man gleich das richtige nehmen: button, und nicht ein anderes per ARIA nachrüsten.

        Also für Linuchs:

        • td im thead zu th ändern

        • <a href="#"> zu <button type="button"> ändern (außerhalb von form ist das type-Attribut nicht unbedingt erforderlich)

        LLAP 🖖

        --
        “You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
        Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
        1. problematische Seite

          Hallo Gunnar,

          und beim Tabellensortierer braucht man keine zusätzlichen Elemente, man kann das Click-Event auch direkt den TDs im THEAD geben.

          Nein.

          Zum einen haben tds im thead i.A. nichts zu suchen; für Kopfzellen sind th-Elemente da.

          ich meinte auch THs. Über den Rest denke ich mal nach.

          Gruß
          Jürgen

        2. problematische Seite

          Tach!

          Zum einen haben tds im thead i.A. nichts zu suchen; für Kopfzellen sind th-Elemente da.

          Die HTML5-Spec sieht das anders: The thead element.

          dedlfix.

          1. problematische Seite

            @@dedlfix

            Zum einen haben tds im thead i.A. nichts zu suchen; für Kopfzellen sind th-Elemente da.

            Die HTML5-Spec sieht das anders: The thead element.

            Nein.

            Falls du auf „Notice the use of both th and td elements in the thead element: the first row is the headers, and the second row is an explanation of how to fill in the table‟ anspielst: Auch in diesem Beispiel sind die Kopfzellen (die Spaltenüberschriften) mit th ausgezeichet.

            Kopfzellen ≠ alle Zellen im thead.

            Und Kopfzellen kann es auch im tbody geben: üblicherweise die jeweils ersten Zellen jeder Zeile.

            LLAP 🖖

            --
            “You might believe there are benefits for the developer, but first of all, you should put those behind the interest of the user.” —Stefan Tilkov
            Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
      2. problematische Seite

        Hallo JürgenB

        <a id="x1_0" onclick="ts_resortTable(document.getElementById('x1_0'), 0)…">

        und beim Tabellensortierer braucht man keine zusätzlichen Elemente, man kann das Click-Event auch direkt den TDs im THEAD geben.

        zusätzliche auslösende Elemente fände ich aus Gründen der Zugänglichkeit gar nicht schlecht.

        @Linuchs:
        Und wenn obige Konstruktion für verschiedene IDs mehrfach im Dokument vorkommt, ist das auch ein sicheres Zeichen dafür, dass man es sich unnötig kompliziert gemacht hat.

        Bis demnächst
        Matthias

        --
        Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
        1. problematische Seite

          Hallo Matthias,

          und beim Tabellensortierer braucht man keine zusätzlichen Elemente, man kann das Click-Event auch direkt den TDs im THEAD geben.

          zusätzliche auslösende Elemente fände ich aus Gründen der Zugänglichkeit gar nicht schlecht.

          ich denke da mal drüber nach. Wenn ich da eine einfache Lösung finde, passe ich den Wiki-Artikel zum Tabellensortierer an. Wahrscheinlich wird ein Button ohne Rahmen, mit transparentem Hintergrund, Textfarbe und Inhalt vom TH eine Lösung sein.

          Gruß
          Jürgen

    2. problematische Seite

      @@Gunnar Bittersmann

      a-Elemente dienen für Links zu anderen Ressourcen oder anderen Bereichen auf der Seite. <a href="#"> ist ein Link zum Seitenanfang. Wenn du nicht zum Seitenanfang springen willst, ist <a href="#"> grundsätzlich falsch.

      Karl Groves macht das in seinem Artikel Links are not buttons. Neither are DIVs and SPANs deutlich.

      LLAP 🖖

      --
      “There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
      Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|