Gunnar Bittersmann: Wie man ein verschachteltes Pull-down-Menü implementiert

In den WAI-ARIA Practices 1.1 findet man dieses Navigation Treeview Example, worin gezeigt wird, wie man ein Aufklapp-Menü barrierefrei umsetzt. ARIA-Attribute ✔︎ Tastaturbedienung ✔︎

Die Liste meiner noch zu schreibenden Blogartikel wird länger und länger … 🤔

LLAP 🖖

-- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann

Folgende Nachrichten verweisen auf diesen Beitrag:

  1. hallo

    In den WAI-ARIA Practices 1.1 findet man dieses Navigation Treeview Example, worin gezeigt wird, wie man ein Aufklapp-Menü barrierefrei umsetzt. ARIA-Attribute ✔︎ Tastaturbedienung ✔︎

    Hast du beachtet, dass das dortige Example Foods kaputt ist?

    -- https://beat-stoecklin.ch/pub/index.html
    1. @@beatovich

      Hast du beachtet, dass das dortige Example Foods kaputt ist?

      Nichts dergleichen bemerkt. Was sollte denn kaputt sein?

      LLAP 🖖

      -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      1. hallo

        @@beatovich

        Hast du beachtet, dass das dortige Example Foods kaputt ist?

        Nichts dergleichen bemerkt. Was sollte denn kaputt sein?

        Es reagiert nicht wie erwartet auf die Tab Taste. Die Verwendung der Pfeiltasten wird nicht indiziert.

        -- https://beat-stoecklin.ch/pub/index.html
        1. @@beatovich

          Es reagiert nicht wie erwartet auf die Tab Taste. Die Verwendung der Pfeiltasten wird nicht indiziert.

          Du irrst.

          “A primary keyboard navigation convention common across all platforms is that the tab and shift+tab keys move focus from one UI component to another while other keys, primarily the arrow keys, move focus inside of components that include multiple focusable elements.” (WAI-ARIA Authoring Practices 1.1, §5.1 Fundamental Keyboard Navigation Conventions)

          LLAP 🖖

          -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          1. Hallo Gunnar,

            bei mir als User ist diese Konvention noch nicht angekommen. Mich hat das Tabulatorverhalen auch irritiert.

            Gruß
            Jürgen

            1. Hallo JürgenB,

              bei mir als User ist diese Konvention noch nicht angekommen. Mich hat das Tabulatorverhalen auch irritiert.

              Benutzt du denn tatsächlich die Tastatur, um UI-Komponenten zu bedienen?

              Denn das ist eigentlich das Standard-Verhalten der UIs unter macOS und Linux. Früher auch unter Windows, wie es heute ist weiss ich allerdings nicht.

              LG,
              CK

              -- https://wwwtech.de/about

              Folgende Nachrichten verweisen auf diesen Beitrag:

              1. Hallo Christian,

                selten. Die Bedienung mit den Pfeiltasten war für mich aber sofort intuitiv, was mich verwirrt hat, war das Verlassen des Menüs mit dem Tabulator. Da habe ich erwartet, einen Hauptmenüpunkt weiter zu kommen. Aber hier ist wohl die Frage: ist jeder Hauptmenüpunkt ein eigenes UI?

                Eine Nachfrage dazu: Wenn das Menü horizontal angeordnet ist und die Untermenüs dann nach unten aufgehen, muss man doch die Funktion der Pfeiltasten vertauschen.

                Gruß
                Jürgen

                1. @@JürgenB

                  Eine Nachfrage dazu: Wenn das Menü horizontal angeordnet ist und die Untermenüs dann nach unten aufgehen, muss man doch die Funktion der Pfeiltasten vertauschen.

                  Ja. Siehe WAI-ARIA Authoring Practices 1.1, §3.24 Tree View:

                  “If the nodes in a tree are arranged horizontally:
                  A. Down Arrow performs as Right Arrow is described above, and vice versa.
                  B. Up Arrow performs as Left Arrow is described above, and vice versa.”

                  LLAP 🖖

                  -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          2. hallo

            @@beatovich

            Es reagiert nicht wie erwartet auf die Tab Taste. Die Verwendung der Pfeiltasten wird nicht indiziert.

            Du irrst.

            Dem Anwender, dessen Erwartungen durch Konventionen geschult wurden, irrtum vorzuwerfen, weil er etwas nicht auf Anhieb versteht, ist kein gutes Argument.

            Meine Konventionen sind durch das Standard Browserverhalten geprägt. Die Tab Taste wechselt zwischen im DOM benachbarten fokusierbaren Elementen. Fokusierbarkeit ist etwas, das ich erwarte bei interaktiven Elementen. Das Versagen, ursprünglich interaktive Elemente im Code zu verwenden, ist das Problem dieses Widgets.

            Du selbst bist einer, der immer wieder dazu aufruft, ursprüngliche interaktive Elemente zu verwenden, statt solche nachbauen zu wollen.

            -- https://beat-stoecklin.ch/pub/index.html
            1. @@beatovich

              Meine Konventionen sind durch das Standard Browserverhalten geprägt.

              CK sprach es an, dass man da durchaus über die Grenzen des Browsers hinweg denken sollte.

              Und die hier relevanten Konventionen sind die derer, die ständig per Tastatur navigieren, nicht derer, die das mal zum Testen der Funktionstüchtigkeit tun.

              Die Tab Taste wechselt zwischen im DOM benachbarten fokusierbaren Elementen.

              Das macht schon Sinn, dass die Tab-Taste das nicht tut, sondern zwischen Komponenten wechselt. Ansonsten würde man sich ja dumm und dämlich tabben … (☞ schlechtes Beispiel)

              Innerhalb einer Komponente Pfeiltasten. Wenn das so Konvention ist, sollte man auch seine Webanwendungen so bauen.

              LLAP 🖖

              -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
              1. hallo

                @@beatovich

                Meine Konventionen sind durch das Standard Browserverhalten geprägt.

                CK sprach es an, dass man da durchaus über die Grenzen des Browsers hinweg denken sollte.

                Dagegen spricht ja nichts.

                Und die hier relevanten Konventionen sind die derer, die ständig per Tastatur navigieren, nicht derer, die das mal zum Testen der Funktionstüchtigkeit tun.

                seufz

                Die Tab Taste wechselt zwischen im DOM benachbarten fokusierbaren Elementen.

                Das macht schon Sinn, dass die Tab-Taste das nicht tut, sondern zwischen Komponenten wechselt.

                Komponente ist kein technisch fassbarer Begriff!

                Ansonsten würde man sich ja dumm und dämlich tabben … (☞ schlechtes Beispiel)

                Das geschieht gerne, wenn man subtrees visuell verbirgt und gleichzeitig fokusierbar halten möchte. Das ist kein von mir unterstütztes Design.

                Innerhalb einer Komponente Pfeiltasten. Wenn das so Konvention ist, sollte man auch seine Webanwendungen so bauen.

                Komponente ist kein technischer Begriff.

                Die Konvention beschränkt sich technisch auf input type=radio Gruppen, select options bzw inputs mit assoziierter Datalist.

                -- https://beat-stoecklin.ch/pub/index.html
                1. @@beatovich

                  Komponente ist kein technischer Begriff.

                  Nicht?

                  Ich würde soetwas wie ein Menü schon als Komponente ansehen. Oder Tabs, in welchen ebenfalls mit Pfeiltasten navigiert wird. (Abschnitt Keyboard Behavior in „Tabbed Interfaces“)

                  Die Konvention beschränkt sich technisch auf input type=radio Gruppen, select options bzw inputs mit assoziierter Datalist.

                  Nein. Die WAI-ARIA Authoring Practices 1.1 hatte ich doch schon oft genug verlinkt. Deren Autoren sind bestimmt keine Dummköpfe, die anderen ihre unsinnigen Konventionen aufzwingen wollen.

                  LLAP 🖖

                  -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                  1. hallo

                    @@beatovich

                    Komponente ist kein technischer Begriff.

                    Nicht?

                    Ich würde soetwas wie ein Menü schon als Komponente ansehen. Oder Tabs, in welchen ebenfalls mit Pfeiltasten navigiert wird. (Abschnitt Keyboard Behavior in „Tabbed Interfaces“)

                    Hmm, mein Browser kennt Tabs. Leider gibt es keine tastenkombination mit Pfeiltasten, welche zwischen den Tabs wechselt.

                    Ich kenne den Begriff TAB sonst nur im Zusammenhang mit der Tab-Taste. Der Browser hat ein spezifisches Standardverhalten. Daraus kommen Erwartungen. Der Browser hat dabei keinerlei Bewusstsein für das, was du als Komponente bezeichnest.

                    Die Konvention beschränkt sich technisch auf input type=radio Gruppen, select options bzw inputs mit assoziierter Datalist.

                    Nein. Die WAI-ARIA Authoring Practices 1.1 hatte ich doch schon oft genug verlinkt. Deren Autoren sind bestimmt keine Dummköpfe, die anderen ihre unsinnigen Konventionen aufzwingen wollen.

                    Dumm ist nur, die Intelligenz anderer als Argument zu verwenden.

                    -- https://beat-stoecklin.ch/pub/index.html
                    1. @@beatovich

                      Ich kenne den Begriff TAB sonst nur im Zusammenhang mit der Tab-Taste.

                      “Tab is not for tabs, which I concede is a bit confusing. I wish the key and the control had different names, but alas.” — Das hast du doch gerade eben erst gelesen‽

                      Dumm ist nur, die Intelligenz anderer als Argument zu verwenden.

                      Allemal besser, als die eigene Dummheit als Argument zu verwenden.

                      LLAP 🖖

                      -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  2. @Gunnar Bittersmann

    das kannst aber auch einfacher haben mittels serverseitiger Technik.

    MfG

    1. @@Ursa Major

      das kannst aber auch einfacher haben mittels serverseitiger Technik.

      Auch unter neuem Namen machst du mit deiner alten Unsitte weiter, jeden meiner Threads mit dummem Gewäsch zu kapern‽ Wenn du nichts zu sagen hast, solltest du dies nicht in einem Posting tun.

      LLAP 🖖

      -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      1. Hallo Gunnar,

        Auch unter neuem Namen machst du mit deiner alten Unsitte weiter, jeden meiner Threads mit dummem Gewäsch zu kapern‽ Wenn du nichts zu sagen hast, solltest du dies nicht in einem Posting tun.

        Oh - war mir gar nicht aufgefallen, hab zur Zeit ziemlich viel zu tun und bin deshalb wenig hier unterwegs… Danke für den Hinweis.

        LG,
        CK

        -- https://wwwtech.de/about
        1. @@Christian Kruse

          Oh - war mir gar nicht aufgefallen

          Ich dachte auch erst, das Posting wäre ein Scherz und die Große Bärin wäre jemand, der sich über Hotti lustig macht.

          LLAP 🖖

          -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      2. Auch unter neuem Namen machst du mit deiner alten Unsitte weiter, jeden meiner Threads mit dummem Gewäsch zu kapern‽ Wenn du nichts zu sagen hast, solltest du dies nicht in einem Posting tun.

        Ich sehe schon lange ein gewisses Restpotential (1%), dass es sich bei Hotti um einen der besten Trolle handelt, die das Netz je hatte.

      3. @Gunnar Bittersmann

        Was bitte spricht denn gegen eine serverseitige Technik!?

        Ich bitte um eine Begründung!

        1. @@Ursa Major

          Was bitte spricht denn gegen eine serverseitige Technik!?

          Nichts. Außer dass das total am Thema vorbei geht, welches hier die clientseitige Präsentation1 eines verschachtelten Menüs (Baumstruktur) ist.

          LLAP 🖖

          1. Und damit ist nicht nur die visuelle Präsentation gemeint.

          -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          1. @Gunnar Bittersmann

            Und damit ist nicht nur die visuelle Präsentation gemeint.

            so, was denn noch!?

            1. Hallo,

              Und damit ist nicht nur die visuelle Präsentation gemeint.

              so, was denn noch!?

              all das, was du nicht brauchst, wenn du dein verschachteltes Pull-down-Menü serverseitig implementierst. 😉

              Gruß
              Jürgen

              1. So isses, Danke.

  3. Hallo Gunnar,

    ich habe mir das Menü mal etwas genauer angesehen und kann mir vorstellen, den Nachfolger für mein aktuelles Checkbox-Hack-Menü auf diesem aufzubauen. Dieses Menü verwendet aber LIs als klick-, tab- oder fokussierbare Elemente. Mir als sehenden ist das egal, aber wie gehen da Vorlesebrowser mit um?

    Gruß
    Jürgen

    1. @@JürgenB

      Dieses Menü verwendet aber LIs als klick-, tab- oder fokussierbare Elemente.

      Dieses Menü verwendet die Elementstruktur, wie man sie für ein statisches Menü ohne pull-down verwenden würde (verschachtelte Liste). Abgesehen von den spans – braucht man die überhaupt?

      Ein-/Ausklappen als progressive enhancement.

      Mir als sehenden ist das egal, aber wie gehen da Vorlesebrowser mit um?

      Sie sollten die vorhandenen ARIA-Attribute (wie role="treeitem") interpretieren.

      LLAP 🖖

      -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  4. In den WAI-ARIA Practices 1.1 findet man dieses Navigation Treeview Example, worin gezeigt wird, wie man ein Aufklapp-Menü barrierefrei umsetzt. ARIA-Attribute ✔︎ Tastaturbedienung ✔︎

    Hab heute für einen Kunden ausnahmsweise nochmal eine Web-Navigation bauen müssen und habe das zum Anlass genommen diese Lösung mal auszuprobieren. Mein Fazit ist durchweg positiv, einfache Integration und hervorragendes Ergebnis. Danke hierfür Gunnar und gerne mehr davon.

  5. Die Liste meiner noch zu schreibenden Blogartikel wird länger und länger

    Isso. Die Liste dessen, was man gerne wissen würde, wächst mit jeder neuen Erkenntnis. Und das gewiss nicht linear.

    1. @@ursus contionabundo

      Isso. Die Liste dessen, was man gerne wissen würde, wächst mit jeder neuen Erkenntnis. Und das gewiss nicht linear.

      Zum Glück wächst mit jeder neuen Erkenntnis auch die Liste dessen, was man nicht gern wissen würde. 😉

      LLAP 🖖

      -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann