Robert B.: Frage zum Wiki-Artikel „Flyout-Menü“ bzgl. details

problematische Seite

Hallo zusammen, hallo @Matthias Scharwies,

im o.g. Wikiartikel heißt es zur alternativen Verwendung des details-Elements:

Screenreader lesen das details-Element als „“ vor, was natürlich abschreckend ist.

Wird damit der komplette Inhalt von details nicht vorgelesen oder wie ist dieser Hinweis zu verstehen?

Vielen Dank und viele Grüße
Robert

  1. problematische Seite

    Hallo Robert B.,

    nein; ich hatte das mal mit NVDA probiert und die Ansage war ziemlich komisch. Ich habe den allerdings jetzt nicht mehr auf meinem Gerät und kann es nicht reproduzieren.

    Das „“ in der Achtung-Box dünkt mich ein Platzhalter zu sein, Matthias hatte den NVDA offenbar auch nicht da.

    Wer hat einen Screenreader und kann ein transkribiertes Beispiel für eine Details-Ansage liefern?

    Rolf

    --
    sumpsi - posui - obstruxi
    1. problematische Seite

      Hallo Robert,

      ich habe ein Video von @Marc , das ich heute nachmittag auf YouTube hochladen werde.

      Herzliche Grüße

      Matthias Scharwies

      --
      Die Signatur findet sich auf der Rückseite des Beitrags.
      1. problematische Seite

        Hej Matthias,

        ich habe ein Video von @Marc , das ich heute nachmittag auf YouTube hochladen werde.

        Ich habe wohl nicht das Privileg eines Politikers, meinen Quatsch von gestern einfach vergessen zu dürfen?

        Bin gespannt, was ich da gesagt habe!

        😉

        Marc (marctrix)

        --
        Ceterum censeo Google esse delendam
        1. problematische Seite

          Servus!

          Hej Matthias,

          ich habe ein Video von @Marc , das ich heute nachmittag auf YouTube hochladen werde.

          Hier der Link: https://www.youtube.com/watch?v=5LvghC1fdbU&ab_channel=MatthiasScharwies

          Ich habe wohl nicht das Privileg eines Politikers, meinen Quatsch von gestern einfach vergessen zu dürfen?

          Bin gespannt, was ich da gesagt habe!

          Ich hatte es vor 2 Wochen mal in der Hand und fand's nicht schlecht. ZU Fasching sammle' ich mal, was ich habe und starte evtl. den SELFHTML-Kanal

          Herzliche Grüße

          Matthias Scharwies

          --
          Die Signatur findet sich auf der Rückseite des Beitrags.
          1. problematische Seite

            Hej Matthias,

            ZU Fasching sammle' ich mal, was ich habe und starte evtl. den SELFHTML-Kanal

            Ich finde nicht die Zeit einen Film vorzubereiten, einzusprechen, zu bearbeiten usw.

            Was aber immer geht, ist ein interview-Format. Das heißt, wer immer mag, darf mich in einer Zoom-Oder Discord-Session oder was euch gefällt mit Fragen löchern. Das können wir gerne aufnehmen und einstellen, wenn ihr mögt. Alles was zu Barrierefreiheit gehört.

            Manchmal driftet das Thema, aber ich finde solche Sessions aus der Vergangenheit ganz gelungen. Hier ein Beispiel für so eine spontane Zusammenkunft, wo es um Tests ging:

            https://www.youtube.com/watch?v=gOK7w4ktu3I

            Marc (marctrix)

            --
            Ceterum censeo Google esse delendam
            1. problematische Seite

              Servus!

              Hej Matthias,

              ZU Fasching sammle' ich mal, was ich habe und starte evtl. den SELFHTML-Kanal

              Ich finde nicht die Zeit einen Film vorzubereiten, einzusprechen, zu bearbeiten usw.

              Was aber immer geht, ist ein interview-Format. Das heißt, wer immer mag, darf mich in einer Zoom-Oder Discord-Session oder was euch gefällt mit Fragen löchern. Das können wir gerne aufnehmen und einstellen, wenn ihr mögt. Alles was zu Barrierefreiheit gehört.

              klingt gut - ich komm' drauf zurück!

              Herzliche Grüße

              Matthias Scharwies

              --
              Die Signatur findet sich auf der Rückseite des Beitrags.
      2. problematische Seite

        Hallo

        ich habe ein Video von @Marc , das ich heute nachmittag auf YouTube hochladen werde.

        Wäre es organisatorisch eine Option, neben dem Youtube-Kanal einen Kanal auf einer PeerTube-Instanz zu betreiben? Es muss ja keine eigene Instanz sein, es „reicht“ ein Account auf einer Instanz, deren Betreiber vertrauenswürdig ist.

        Tschö, Auge

        --
        „Habe ich mir das nur eingebildet, oder kann der kleine Hund wirklich sprechen?“ fragte Schnapper. „Er behauptet, nicht dazu imstande zu sein“ erwiderte Victor. Schnapper zögerte (…) „Nun …“ sagte er schließlich, „ich schätze, er muss es am besten wissen.“ Terry Prattchett, Voll im Bilde
        1. problematische Seite

          Servus!

          Hallo

          ich habe ein Video von @Marc , das ich heute nachmittag auf YouTube hochladen werde.

          Wäre es organisatorisch eine Option, neben dem Youtube-Kanal einen Kanal auf einer PeerTube-Instanz zu betreiben?

          Organisatorisch ja, wsl. auch prinzipiell. Als wir unsere Mastodon-Instanz starteten, wurde ich gefragt, ob wir auch auf Matrix gingen. Damals war Konsens, erst mal abzuwarten.

          YT ist nicht Facebook und Twitter - hat aber grad in letzter Zeit noch mehr Werbung und Pseudo-Umfragen bekommen. Das macht den Umstieg auf nichtkommerzielle Plattformen einfacher!

          Das muss im Plenum besprochen werden, entweder jetzt schon am 27. oder im Mai in Hannover.

          Herzliche Grüße

          Matthias Scharwies

          --
          Die Signatur findet sich auf der Rückseite des Beitrags.
          1. problematische Seite

            Hallo

            Wäre es organisatorisch eine Option, neben dem Youtube-Kanal einen Kanal auf einer PeerTube-Instanz zu betreiben?

            Organisatorisch ja, wsl. auch prinzipiell. Als wir unsere Mastodon-Instanz starteten, wurde ich gefragt, ob wir auch auf Matrix gingen. Damals war Konsens, erst mal abzuwarten.

            Zu Matrix kann ich nichts sagen. Bezüglich PeerTube sei gesagt, dass es das selbe Protokoll [1] wie auch Mastodon benutzt [2]. Das macht es möglich, mit ActivitiyPub-basierten Diensten, wie eben Mastodon, einen (erreichbaren) PeerTube-Kanal zu abonnieren und Videos zu kommentieren.

            YT ist nicht Facebook und Twitter …

            Es ist aber Teil von Google und steht damit – auch in in Hinsicht auf die Vertrauenswürdigkeit – in einer Reihe mit den von dir genannten Diensten.

            … hat aber grad in letzter Zeit noch mehr Werbung und Pseudo-Umfragen bekommen. Das macht den Umstieg auf nichtkommerzielle Plattformen einfacher!

            Ich war mit meiner Frage nicht mal auf einen Umstieg aus, sondern auf eine Ergänzung. Damit bietet man eine Alternative zum Quasi-Monopolisten, behält die Followerschaft bei selbigem und offeriert eine Möglichkeit zum Umstieg des Publikums auf den Alternativkanal. Bei der Blender-Foundation wurde das nach der Sperrung des Kanals bei Youtube im Jahr 2018 und einer Odysse durch die Untiefen des Youtube-Supports zur Wiederfreischaltung des Kanals genau so gemacht. Bei denen gibt es eine eigene PeerTube-Instanz [4] und den Youtube-Kanal.

            Das halte ich für guten Weg, beide Welten zu bespielen. Zudem trägt es zur Steigerung der Bekanntheit einer (meiner Meinung nach) mittlerweile recht ordentlich funktionierenden Youtube-Alternative [5] bei.

            Tschö, Auge

            --
            „Habe ich mir das nur eingebildet, oder kann der kleine Hund wirklich sprechen?“ fragte Schnapper. „Er behauptet, nicht dazu imstande zu sein“ erwiderte Victor. Schnapper zögerte (…) „Nun …“ sagte er schließlich, „ich schätze, er muss es am besten wissen.“ Terry Prattchett, Voll im Bilde

            1. ActivityPub ↩︎

            2. wie auch weitere dezentrale Dienste [3] ↩︎

            3. das viel beschworene „Fediverse“ ↩︎

            4. Die haben als Anbieter einer 3D-Grafik-Software natürlich genug Futter für eine eigene Instanz. ↩︎

            5. Ich meine eine Alternative im Sinne von einer weiteren Möglichkeit, Videos zu verbreiten. Dass sich auf PeerTube nicht die bei Youtube verfügbare Breite an Angeboten findet, sollte klar sein. ↩︎

            1. problematische Seite

              Servus!

              Hallo

              Wäre es organisatorisch eine Option, neben dem Youtube-Kanal einen Kanal auf einer PeerTube-Instanz zu betreiben?

              Organisatorisch ja, wsl. auch prinzipiell. Als wir unsere Mastodon-Instanz starteten, wurde ich gefragt, ob wir auch auf Matrix gingen. Damals war Konsens, erst mal abzuwarten.

              Zu Matrix kann ich nichts sagen.

              Ja, ich auch nicht. Dachte eigentlich, dass das die Fedi-Alternative zu Discord sei - dem ist aber nicht so - es hat ein anderes Protokoll.

              Bezüglich PeerTube sei gesagt, dass es das selbe Protokoll [1] wie auch Mastodon benutzt [2]. Das macht es möglich, mit ActivitiyPub-basierten Diensten, wie eben Mastodon, einen (erreichbaren) PeerTube-Kanal zu abonnieren und Videos zu kommentieren.

              Du rennst bei mir offene Türen ein. Danke, dass du die Diskussion da anstößt!

              YT ist nicht Facebook und Twitter …

              Es ist aber Teil von Google und steht damit – auch in in Hinsicht auf die Vertrauenswürdigkeit – in einer Reihe mit den von dir genannten Diensten.

              … hat aber grad in letzter Zeit noch mehr Werbung und Pseudo-Umfragen bekommen. Das macht den Umstieg auf nichtkommerzielle Plattformen einfacher!

              Ich war mit meiner Frage nicht mal auf einen Umstieg aus, sondern auf eine Ergänzung.

              Ja, aber jetzt brauchen wir erst mal Inhalte.

              Damit bietet man eine Alternative zum Quasi-Monopolisten, behält die Followerschaft bei selbigem und offeriert eine Möglichkeit zum Umstieg des Publikums auf den Alternativkanal. Bei der Blender-Foundation wurde das nach der Sperrung des Kanals bei Youtube im Jahr 2018 und einer Odysse durch die Untiefen des Youtube-Supports zur Wiederfreischaltung des Kanals genau so gemacht. Bei denen gibt es eine eigene PeerTube-Instanz [4] und den Youtube-Kanal.

              Das halte ich für guten Weg, beide Welten zu bespielen. Zudem trägt es zur Steigerung der Bekanntheit einer (meiner Meinung nach) mittlerweile recht ordentlich funktionierenden Youtube-Alternative [5] bei.

              Tschö, Auge

              Herzliche Grüße

              Matthias Scharwies

              --
              Die Signatur findet sich auf der Rückseite des Beitrags.

              1. ActivityPub ↩︎

              2. wie auch weitere dezentrale Dienste [3] ↩︎

              3. das viel beschworene „Fediverse“ ↩︎

              4. Die haben als Anbieter einer 3D-Grafik-Software natürlich genug Futter für eine eigene Instanz. ↩︎

              5. Ich meine eine Alternative im Sinne von einer weiteren Möglichkeit, Videos zu verbreiten. Dass sich auf PeerTube nicht die bei Youtube verfügbare Breite an Angeboten findet, sollte klar sein. ↩︎

        2. problematische Seite

          Servus!

          Hallo

          ich habe ein Video von @Marc , das ich heute nachmittag auf YouTube hochladen werde.

          Wäre es organisatorisch eine Option, neben dem Youtube-Kanal einen Kanal auf einer PeerTube-Instanz zu betreiben? Es muss ja keine eigene Instanz sein, es „reicht“ ein Account auf einer Instanz, deren Betreiber vertrauenswürdig ist.

          Ich hatte gestern schon mal kurz und heute morgen etwas intensiver gesucht.

          Von https://joinpeertube.org/ kommt man irgendwann auf diese Seite:

          Eine PeerTube-Plattform finden

          Es ist halt dezentral, die meisten Plattformen begrenzen den Zugang auf ihre eigenen Studierenden.

          Zum Schluss kam ich auf https://zumvideo.de/ Interessant, was man da alles findet! Ich werde mich die Tage dort melden, ob sie bei uns eine Ausnahme machen und eine Registrierung zulassen.

          Herzliche Grüße

          Matthias Scharwies

          --
          Die Signatur findet sich auf der Rückseite des Beitrags.
          1. problematische Seite

            Hallo

            PeerTube

            Ich hatte gestern schon mal kurz und heute morgen etwas intensiver gesucht.

            Ich hatte dir eben schon auf anderem Wege etwas dazu geschrieben. Dennoch …

            Von https://joinpeertube.org/ kommt man irgendwann auf diese Seite:

            Eine PeerTube-Plattform finden

            Man merkt auf der Auswahlseite, dass es wesentlich weniger PeerTube-Instanzen als Mastodon-Instanzen gibt. 🙂 Es ist ja auch etwas spezieller, eine Video-Plattform zu betreiben.

            Es ist halt dezentral, die meisten Plattformen begrenzen den Zugang auf ihre eigenen Studierenden.

            Zum Schluss kam ich auf https://zumvideo.de/ Interessant, was man da alles findet! Ich werde mich die Tage dort melden, ob sie bei uns eine Ausnahme machen und eine Registrierung zulassen.

            Wenn ich mich da umschaue, sehe ich auf zumvideo.de den Account „zumlernen“. Der gehört einem Lehrer für Informatik & Medientechnik, der offensichtlich der Betreiber ist. Sein Account ist jedenfalls als „EIGENTÜMER ACCOUNT“ [1] gekennzeichnet. Seine Themen sind unter anderem auch HTML, CSS und JS. SelfHTML stünde mit den eigenen Inhalten also in Quasi-Konkurrenz zu den seinen. Keine Ahnung, ob der Betreiber das auf seiner eigenen Instanz haben wollen würde.

            🤔

            Dass der Link zum Impressum auf der Infoseite ins Nirwana führt (404), gibt allerdings ein nicht so perfektes Bild ab.


            [edit]:Fragt doch mal Jeena [2].


            Tschö, Auge

            --
            „Habe ich mir das nur eingebildet, oder kann der kleine Hund wirklich sprechen?“ fragte Schnapper. „Er behauptet, nicht dazu imstande zu sein“ erwiderte Victor. Schnapper zögerte (…) „Nun …“ sagte er schließlich, „ich schätze, er muss es am besten wissen.“ Terry Prattchett, Voll im Bilde

            1. ja, mit Deppenleerzeichen ↩︎

            2. Keine Ahnung, ob das wirklich sinnvoll ist. Ich fand's bloß witzig, ihn auf joinpeertube.org durch zufällig weites scrollen zu finden. ↩︎

            1. problematische Seite

              Liebes Auge,

              Dass der Link zum Impressum auf der Infoseite ins Nirwana führt (404), gibt allerdings ein nicht so perfektes Bild ab.

              gleiche Kerbe: Es wird leider vermittelt, wie man es schon seit Langem eigentlich genau nicht (mehr) machen sollte (JavaScript: Taschenrechner - Erweiterung & Code verbessern).

              Liebe Grüße

              Felix Riesterer

              1. problematische Seite

                Hallo

                Dass der Link zum Impressum auf der Infoseite ins Nirwana führt (404), gibt allerdings ein nicht so perfektes Bild ab.

                gleiche Kerbe: Es wird leider vermittelt, wie man es schon seit Langem eigentlich genau nicht (mehr) machen sollte (JavaScript: Taschenrechner - Erweiterung & Code verbessern).

                Daran möchte ich aber eine mögliche Entscheidung, ob SelfHTML auf dieser Instanz seine Zweitheimat für Videos findet, nicht festmachen wollen. Der Betreiber darf auf Anfrage aber gerne entscheiden, ob er sie bereitstellen mag.

                Wenn SelfHTML einen PeerTube-basierten Videokanal auf einer förderierenden Instanz betreiben sollte, sind die Videos öffentlich verfügbar. Auch für Konsumenten der Instanz zumvideo.de. Entweder direkt, wenn dort förderiert wird [1], oder über andere Instanzen, die das tun.


                *btw* (und nur am Rande des aktuellen Themas) Vor ein paar Jahren, noch vor der Pandemie, hatten wir aus Anlass der Übernahme von Github durch Microsoft eine Diskussion über Alternativen zu Github, auch über solche, die man selbst betreiben kann. Damals „träumte“ ich von selbstgehosteten Diensten, die man mit anderen, fremden Instanzen förderieren kann. Mittlerweile steht das mit dem von Gitea geforkten Forgejo so gut wie vor der Tür. 🎺🎉😀\o/ [2]

                Tschö, Auge

                --
                „Habe ich mir das nur eingebildet, oder kann der kleine Hund wirklich sprechen?“ fragte Schnapper. „Er behauptet, nicht dazu imstande zu sein“ erwiderte Victor. Schnapper zögerte (…) „Nun …“ sagte er schließlich, „ich schätze, er muss es am besten wissen.“ Terry Prattchett, Voll im Bilde

                1. wonach es allerdings nicht aussieht ↩︎

                2. Gibt es \o/ nicht als Emoji oder war ich nur zu doof, es zu finden? ↩︎

                1. problematische Seite

                  Hallo Auge,

                  Gibt es \o/ nicht als Emoji oder war ich nur zu doof, es zu finden?

                  Weiß nicht 🤷

                  Ich weiß nur eins: diese strikte Verteufelung von Google oder Microsoft bringt uns auch nicht weiter und macht nur mehr Arbeit.

                  Rolf

                  --
                  sumpsi - posui - obstruxi
                  1. problematische Seite

                    Hallo

                    Gibt es \o/ nicht als Emoji oder war ich nur zu doof, es zu finden?

                    Weiß nicht 🤷

                    Hast also auch nichts gefunden. Dann bin ich wenigstens nicht der einzige Doofi. 😁😆😉

                    Ich weiß nur eins: diese strikte Verteufelung von Google oder Microsoft bringt uns auch nicht weiter und macht nur mehr Arbeit.

                    Huch, wo bist du denn abgebogen? Etwa bei der damaligen Diskussion (Juni 2018)?

                    Tschö, Auge

                    --
                    „Habe ich mir das nur eingebildet, oder kann der kleine Hund wirklich sprechen?“ fragte Schnapper. „Er behauptet, nicht dazu imstande zu sein“ erwiderte Victor. Schnapper zögerte (…) „Nun …“ sagte er schließlich, „ich schätze, er muss es am besten wissen.“ Terry Prattchett, Voll im Bilde
                    1. problematische Seite

                      Hallo Auge,

                      Hast also auch nichts gefunden.

                      Ich hab vor allem :jubel mit :shrug verwechselt…

                      Wie wär's mit \( ゚ヮ゚)/ - was asciimoji.com als (yay) umschreibt.

                      🤗 ist vermutlich zu schwach für deine Jubel-Ambition und ist auch eigentlich als :hugging_face notiert.

                      Rolf

                      --
                      sumpsi - posui - obstruxi
                      1. problematische Seite

                        Hallo

                        Wie wär's mit \( ゚ヮ゚)/ - was asciimoji.com als (yay) umschreibt.

                        Och nöö, das artet ja in Arbeit aus. 😜

                        🤗 ist vermutlich zu schwach für deine Jubel-Ambition und ist auch eigentlich als :hugging_face notiert.

                        Nö, der is mir zu luschig. Das sollte mit hochgereckten, von sich geworfenen Armen schon nach echter Begeisterung aussehen.

                        Tschö, Auge

                        --
                        „Habe ich mir das nur eingebildet, oder kann der kleine Hund wirklich sprechen?“ fragte Schnapper. „Er behauptet, nicht dazu imstande zu sein“ erwiderte Victor. Schnapper zögerte (…) „Nun …“ sagte er schließlich, „ich schätze, er muss es am besten wissen.“ Terry Prattchett, Voll im Bilde
                      2. problematische Seite

                        🎉🥳🎊🙌?
                        ヮ läßt sich hier nicht vom ヮ゚ trennen. Ob man bei dem also vielleicht aufpassen soll, ob sich da nicht ein Ninja versteckt?

            2. problematische Seite

              Hallo Auge,

              Dass der Link zum Impressum auf der Infoseite ins Nirwana führt (404),...

              ...ist vielleicht gar nicht schlecht? Wenn ich die Seite hier aufrufen will, beschwert sich der Firmen-Virenscanner:

              Die angefragte URL wurde durch das URL-Filterdatenbank-Modul ... blockiert. Die URL befindet sich in Kategorien, die vom Administrator derzeit nicht zugelassen werden.
              
              URL: https://zumlernen.de/impressum.html
              URL-Kategorien: Malicious Sites
              Reputation: High Risk
              Medientyp:
              

              Rolf

              --
              sumpsi - posui - obstruxi
        3. problematische Seite

          … deren Betreiber vertrauenswürdig ist.

          Nur so ein Gedanke: wie viele Menschen wurden „letztens“ (weil’s ja einigermaßen aktuell ist; aber das hat mit dem Prinzip dazu nur bedingt zu tun) von vertrauenswürdigen Mitmenschen mit Covid angesteckt?

    2. problematische Seite

      Moin Rolf,

      nein; ich hatte das mal mit NVDA probiert und die Ansage war ziemlich komisch. Ich habe den allerdings jetzt nicht mehr auf meinem Gerät und kann es nicht reproduzieren.

      im HTMLHell Adventskalender habe ich einen Hinweis gefunden:

      When you use <details> and <summary>, NVDA and JAWS both narrate it as a button in Chrome, and they'll mention if the element is collapsed or expanded. But when you use the same markup in Firefox, they narrate the marker (that is, the visual indicator is being used to indicate the element is collapsed or expanded) as well. My previous example will be read as “Filled right pointing small triangle, what are cephalopods, button, collapsed”.

      Viele Grüße
      Robert

      1. problematische Seite

        Hej zusammen,

        ausführlichste Informationen dazu gibt es (ebenfalls auf englisch) bei Adrian Roselli:

        1. Disclosure widgets
        2. Details / Summary Are Not [insert control here]

        Vor allem letzteres erklärt, warum es sich seltsam anhört in einer Navigation. Aber ich hatte ja schon gesagt, dass das nicht schön ist, aber spontan keinen Verstoß gegen Normen oder WCAG gefunden. Aufwendig selber besser machen oder funktionierendes (schwer zu finden) übernehmen, wenn erlaubt, ist in der Navigation der bessere Weg.

        Aber die gesetzlich geforderten Minimal-Anforderungen sollte die Wiki-Lösung erfüllen.

        Marc (marctrix)

        --
        Ceterum censeo Google esse delendam
        1. problematische Seite

          Hallo,

          Falls geplant ist, doch eine auf details/summary basierende Navigation anzubieten, wir hatten das schon mal. Da war fast alles drin, was so gefordert wird. Nur die Bedienung mit den Pfeiltasten fehlte noch.

          Gruß
          Jürgen

          1. problematische Seite

            Servus!

            Hallo,

            Falls geplant ist, doch eine auf details/summary basierende Navigation anzubieten, wir hatten das schon mal. Da war fast alles drin, was so gefordert wird. Nur die Bedienung mit den Pfeiltasten fehlte noch.

            Im Prinzip geht es ja um ein disclosure widget.

            Das wird im oberen Beispiel (Flyout-Menü mit toggle-Button) von Hand nachgebaut; als scheinbar einfachere Alternative wird eine Variante mit details/summary angeboten.

            Die Kritik der mangelnden Semantik hat @Marc entkräftet, da er nach Rücksprache mit SR-Nutzern uns mitgeteilt hat, dass dies Screenreadern-Nutzern als gewohnt vorkommt.

            Problem an den Eigenbaulösungen ist, dass jeder Webentwickler und jedes Framework eine eigene Variante hat.

            Mittlerweile gibt es mit popover eine barrierefreie, native HTML-lösung, die in allen Browsern außer dem Firefox funktioniert. Mit FF125 auch dort, sodass der Polyfill dann nach ca. 6 weiteren Monaten überflüssig sein wird.

            Herzliche Grüße

            Matthias Scharwies

            --
            Die Signatur findet sich auf der Rückseite des Beitrags.
            1. problematische Seite

              Hallo Matthias,

              Flyout Menü mit popover? Kommt mir gerade merkwürdig vor.

              Rolf

              --
              sumpsi - posui - obstruxi
              1. problematische Seite

                Servus!

                Hallo Matthias,

                Flyout Menü mit popover? Kommt mir gerade merkwürdig vor.

                Könntest du mit „ungewohnt“ leben?

                Tooltips_mit_Popover#explizites_Beenden

                <nav>
                <button popovertarget="flyout"> → Navigation ausklappen </button>
                
                <ul id="flyout" popover>
                  <li></li>
                  <li></li>
                  <button popovertarget="flyout" popovertargetaction="hide" class="close-btn">
                    <span aria-hidden="true">X</span>
                    <span class="sr-only">Schließen</span>
                </button>
                </ul>
                </nav>
                

                Kein JS nötig!

                Wsl. ist es besser, ein div um das ul herum zu verwenden. Ich geh jetzt aber raus - die Sonne scheint!

                Herzliche Grüße

                Matthias Scharwies

                --
                Die Signatur findet sich auf der Rückseite des Beitrags.
                1. problematische Seite

                  Hallo Matthias,

                  das meine ich nicht. Bei einer Navigation muss das Menü exakt positioniert werden können, damit es wie ein Dropdown aussieht. Die Popovers habe ich so verstanden, dass sie zentriert angezeigt werden. Oder ist das an Irrtum? Ich habe das Thema noch nicht vertieft…

                  Rolf

                  --
                  sumpsi - posui - obstruxi
                  1. problematische Seite

                    Servus!

                    Hallo Matthias,

                    das meine ich nicht. Bei einer Navigation muss das Menü exakt positioniert werden können, damit es wie ein Dropdown aussieht. Die Popovers habe ich so verstanden, dass sie zentriert angezeigt werden. Oder ist das an Irrtum? Ich habe das Thema noch nicht vertieft…

                    Es geht mit margin, ist aber nicht komfortabel: https://wiki.selfhtml.org/extensions/Selfhtml/frickl.php/Beispiel:Popover-3.html#view_result

                    Die Lösung wird irgendwann anchor positioning sein.

                    Eine mögliche Realisierung heute könnte ein seitenfüllendes, transparentes Popup sein, in dem die ul einen farbigen Hintergrund bekommt und einfach links positioniert ist. Problem dabei: ein Klick auf die Webseiteninhalte wird durch das transparente popover abgefangen.

                    Herzliche Grüße

                    Matthias Scharwies

                    --
                    Die Signatur findet sich auf der Rückseite des Beitrags.
            2. problematische Seite

              Hej Matthias,

              Falls geplant ist, doch eine auf details/summary basierende Navigation anzubieten, wir hatten das schon mal. Da war fast alles drin, was so gefordert wird. Nur die Bedienung mit den Pfeiltasten fehlte noch.

              Im Prinzip geht es ja um ein disclosure widget.

              Nicht wirklich, es ist ein flyout-Menü. Es gibt Gemeinsamkeiten und Unterschiede zwischen beidem.

              Das wird im oberen Beispiel (Flyout-Menü mit toggle-Button) von Hand nachgebaut; als scheinbar einfachere Alternative wird eine Variante mit details/summary angeboten.

              Die Kritik der mangelnden Semantik hat @Marc entkräftet, da er nach Rücksprache mit SR-Nutzern uns mitgeteilt hat, dass dies Screenreadern-Nutzern als gewohnt vorkommt.

              Das war eine Annahme, ich habe keine Umfrage dazu gemacht.

              Problem an den Eigenbaulösungen ist, dass jeder Webentwickler und jedes Framework eine eigene Variante hat.

              Was uns aber nicht abhalten muss, eine weitere anzubieten für Leute, die hier Hilfe suchen, weil sie noch keine entsprechende Variante haben.

              Und es wäre natürlich ideal, wenn es nicht so eine "kann keine offizielle Barriere finden"-Lösung wäre, sondern ein best practice.

              Im Grunde so etwas wie beim W3C gezeigt.

              Das ist aber auch noch recht rudimentär, insbesondere hat es keine deutschsprachigen Erläuterungen und als jemand, der nicht programmiert, kann ich nicht sagen, ob das verwendete JS auf aktuellem Stand ist.

              Mehr dazu gibt es bei Heydon Pickerings inclusive design components.

              Mit dem Hintergrundwissen kann man ein best practice erstellen und die Erstellung auf deutsch erläutern.

              Mittlerweile gibt es mit popover eine barrierefreie, native HTML-lösung, die in allen Browsern außer dem Firefox funktioniert. Mit FF125 auch dort, sodass der Polyfill dann nach ca. 6 weiteren Monaten überflüssig sein wird.

              Das habe ich noch nicht getestet, kann mir aber nicht vorstellen, dass das für Navigationen gedacht ist.

              Dürfte ebenso "mittelprächtig" sein wie die Lösung mit details und summary

              Die Signatur findet sich auf der Rückseite des Beitrags.

              Hmmm - sehe ich nicht. Brauche ich dafür einen Flachbildschirm oder einen Röhrenmonitor?

              Barrierefrei ist das aber nicht. Schreib es doch auf die Vorderseite!

              Marc (marctrix)

              --
              Ceterum censeo Google esse delendam
              1. problematische Seite

                Servus!

                Mit dem Hintergrundwissen kann man ein best practice erstellen und die Erstellung auf deutsch erläutern.

                Nicht immer alles selber bauen! Standards verwenden! [1]

                Mittlerweile gibt es mit popover eine barrierefreie, native HTML-lösung, die in allen Browsern außer dem Firefox funktioniert. Mit FF125 auch dort, sodass der Polyfill dann nach ca. 6 weiteren Monaten überflüssig sein wird.

                Das habe ich noch nicht getestet,

                Mach mal! Warum haben die Profis immer so viele Angst vor Neuerungen?

                kann mir aber nicht vorstellen, dass das für Navigationen gedacht ist.

                Doch!

                Dürfte ebenso "mittelprächtig" sein wie die Lösung mit details und summary

                Nein! Es ist semantisch frei, aber völlig zugänglich. Die ganzen role- und aria-Attribute werden schon im Standardverhalten durch den Browser angelegt. Für Nutzer hat es den Vorteil, dass es eben immer die gleiche UI ist.

                Herzliche Grüße

                Matthias Scharwies

                --
                Die Signatur findet sich auf der Rückseite des Beitrags.

                1. Ich fand's bemerkenswert, dass @Hörnchen Rolf und mir sagte, dass er anstelle des dialog-Elements ein div mit role="dialog" verwenden würde, weil's besser wäre. ↩︎

                1. problematische Seite

                  Hej Matthias,

                  Servus!

                  Mit dem Hintergrundwissen kann man ein best practice erstellen und die Erstellung auf deutsch erläutern.

                  Nicht immer alles selber bauen! Standards verwenden! [^1]

                  Sowieso. Erste ARIA-Regel.

                  Das habe ich noch nicht getestet,

                  Mach mal! Warum haben die Profis immer so viele Angst vor Neuerungen?

                  "Das habe ich noch nicht getestet" ≠ "Ich habe Angst".

                  Wenn ich so etwas enpfehle, bin ich dafür verantwortlich, dass Blinde die Webseiten meiner Kunden bedienen und verstehen können. es muss in ihrem (womöglich alten) Screenreader laufen.

                  Es braucht keine Angst vor Neuerungen. In der Regel gibt es handfeste Argumente für oder gegen eine neue Technik. 😉

                  kann mir aber nicht vorstellen, dass das für Navigationen gedacht ist.

                  Doch!

                  Dieses "Doch!" dürfte gerne mit einem Beleg verlinkt sein...

                  Marc (marctrix)

                  --
                  Ceterum censeo Google esse delendam
                  1. problematische Seite

                    Servus!

                    Hej Matthias,

                    Servus!

                    Mit dem Hintergrundwissen kann man ein best practice erstellen und die Erstellung auf deutsch erläutern.

                    Nicht immer alles selber bauen! Standards verwenden! [^1]

                    Sowieso. Erste ARIA-Regel.

                    Das habe ich noch nicht getestet,

                    Mach mal! Warum haben die Profis immer so viele Angst vor Neuerungen?

                    "Das habe ich noch nicht getestet" ≠ "Ich habe Angst".

                    Wenn ich so etwas enpfehle, bin ich dafür verantwortlich, dass Blinde die Webseiten meiner Kunden bedienen und verstehen können. es muss in ihrem (womöglich alten) Screenreader laufen.

                    Ja, Du hast Recht!

                    tl;dr

                    Popover ist interessant, benötigt aber aktuell einen Polyfill. FF125 kommt in 3-4 Monaten (jetzt FF122), dann noch ein bisschen.

                    Anchor positioning ist Zukunftsmusik für 2025?

                    Es braucht keine Angst vor Neuerungen. In der Regel gibt es handfeste Argumente für oder gegen eine neue Technik. 😉

                    kann mir aber nicht vorstellen, dass das für Navigationen gedacht ist.

                    Doch!

                    Dieses "Doch!" dürfte gerne mit einem Beleg verlinkt sein...

                    Mehr als menu hab' ich nicht gefunden! 😀

                    Sobald ich was hab', kommt's in Social Media.

                    Herzliche Grüße

                    Matthias Scharwies

                    --
                    Die Signatur findet sich auf der Rückseite des Beitrags.