12 Kommentare

Silvester-Knaller: Exklusive Akkordeons ohne JavaScript!

https://commons.wikimedia.org/wiki/File:Fireworks.svg

Im Oktober stellten wir die neuen Popover-Boxen vor, mit der die open-ui.org Tooltipps und Popover vereinheitlichen wollten. Schon da wunderte ich mich über die schnelle Umsetzung der sinnvollen Vorschläge durch die Browserhersteller. Verständlich wird dies, wenn man sieht, dass viele Mitglieder der Initative Google-Mitarbeiter sind.

Exklusive Akkordeons

Ein gängiges UI-Muster im Web ist eine Akkordeonkomponente (neudeutsch: Offenlegungs-Widget), die einzeln maximiert (oder minimiert) werden können, um ihren Inhalt ein- oder auszublenden. Dafür gibt es das native details-Element.

Eine Variante des Akkordeon-Musters ist das exklusive Akkordeon, bei dem nur eines der Offenlegungs-Widgets gleichzeitig geöffnet werden kann.

Bis jetzt musste das mit viel JavaScript und noch mehr ARIA-Attributen von Hand nachgebaut werden. Jetzt gibt es die Möglichkeit, mehrere details-Elemente mit demselben name-Wert zu einer semantischen Gruppe zusammenzufassen. Wenn du eines der details-Elemente aus der Gruppe öffnest, wird das zuvor geöffnete Element automatisch geschlossen.

Im Oktober klang das noch wie Zukunftsmusik, im Dezember haben das die neuesten Versionen von Chrome, Edge und Safari schon implementiert:

Registerkarten

Auch Registerkarten (Tab Panels) sind so möglich:

Für den Firefox und ältere Browserversionen helfen einige Zeilen Javascript! Das ausführliche Tutorial kannst du im SELF-Wiki lesen:

Infobox/Akkordeon mit details

So endet 2023 mit einem wirklichen „Silvester-Knaller“ und wir können uns auf 2024 und viel Neues freuen!

eingeordnet unter:

veröffentlicht von Matthias Scharwies

Antwort verfassen Antwort mit Zitat verfassen

  1. Silvester-Knaller: Exklusive Akkordeons ohne JavaScript!

    Gunnar Bittersmann E-Mail-Adresse des Autors Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@Matthias Scharwies

    Der Abschnitt „Registerkarten“ ist aber kein Knaller, sondern ein Blindgänger. Die Spec sagt ausdrücklich: “it is not conforming to use the details element when attempting to represent another type of control. For example, tab widgets and menu widgets are not disclosure widgets, so abusing the details element to implement these patterns is incorrect.”

    Kwakoni Yiquan

    --
    Ad astra per aspera
    Antwort verfassen Antwort mit Zitat verfassen
    –
    Informationen zu den Bewertungsregeln

    1. Silvester-Knaller: Exklusive Akkordeons ohne JavaScript!

      Camping_RIDER E-Mail-Adresse des Autors Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Aloha ;)

      Der Abschnitt „Registerkarten“ ist aber kein Knaller, sondern ein Blindgänger. Die Spec sagt ausdrücklich: “it is not conforming to use the details element when attempting to represent another type of control. For example, tab widgets and menu widgets are not disclosure widgets, so abusing the details element to implement these patterns is incorrect.”

      Wenn ich dieses Spec-Zitat lese komme ich nicht umhin mich zu fragen, ob da jetzt nicht die Auslegung inkonsequent ist.

      Immerhin ist es ja so, dass die "Registerkarten" sich (zumindest in meiner Wahrnehmung) nicht wesentlich vom "exklusiven Akkordeon" unterscheiden, oder ich sehe den wesentlichen Unterschied nicht.

      Demnach wären dann die Registerkarten nicht "another type of control" im Vergleich zum "exklusiven Akkordeon".

      Viel eher sehe ich Unterschiede zwischen einem normalen details-Element (Text, der nach Belieben einzeln auf und zugeklappt werden kann) und dem "exklusiven Akkordeon" (Text, dessen Aufklappen anderes zuklappt, also nicht einzeln nur für sich genommen steht sondern in einem übergeordneten Sinnzusammenhang und einer Exklusivität, die die ursprüngliche Intention nicht hergibt).

      Ich sehe demnach keinen Grund, die "Registerkarten" als Fehlzündung zu bezeichnen während man gleichzeitig das "exklusive Akkordeon" zulässt. Viel eher müsste man, so zumindest mein Verständnis der Spec, bereits das "exklusive Akkordeon" eigentlich sein lassen, weil man damit "another type of control" repräsentiert, was laut Spec non-conforming (also ein „Hack“) ist...

      Grüße,

      RIDER

      --
      Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Albers-Zoller
      # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
      Antwort verfassen Antwort mit Zitat verfassen
      –
      Informationen zu den Bewertungsregeln

      1. Silvester-Knaller: Exklusive Akkordeons ohne JavaScript!

        Rolf B
        – Informationen zu den Bewertungsregeln

        Hallo Camping_RIDER,

        Immerhin ist es ja so, dass die "Registerkarten" sich (zumindest in meiner Wahrnehmung) nicht wesentlich vom "exklusiven Akkordeon" unterscheiden, oder ich sehe den wesentlichen Unterschied nicht

        Der Unterschied ist: du kannst alle details-Elemente schließen. In einem Tab-Control kannst Du das nicht.

        Das eine ist ein disclosure-Widget (aufklappbare Zusatzinfos), das andere ein Überlagerungs-Widget (den Namen habe ich mir gerade ausgedacht), mit dem sich Inhalte stapeln lassen und in dem ein Inhaltsblock immer sichtbar ist.

        Ich finde die Spec allerdings scheinheilig. Man soll details nicht für Tabs verwenden, aber ohne JS hat man auch nichts, was man statt dessen verwenden kann. Den Radiobutton-Hack vielleicht. Aber der ist auch nicht zugänglich.

        Rolf

        --
        sumpsi - posui - obstruxi
        Antwort verfassen Antwort mit Zitat verfassen
        –
        Informationen zu den Bewertungsregeln

        1. Silvester-Knaller: Exklusive Akkordeons ohne JavaScript!

          JürgenB Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Hallo,

          ich finde, immer wenn mit vielen Worten erklärt wird, warum gerade für diesen Einsatz details/summary nicht geeignet ist, wird es mit JavaScript und viel Aria nachgebaut.

          Gruß
          Jürgen

          Antwort verfassen Antwort mit Zitat verfassen
          –
          Informationen zu den Bewertungsregeln

          1. Silvester-Knaller: Exklusive Akkordeons ohne JavaScript!

            Rolf B
            – Informationen zu den Bewertungsregeln

            Hallo JürgenB,

            ja, aber DANN dem richtigen Aria. Mit Rollen wie tab, tablist und tabpanel.

            Rolf

            --
            sumpsi - posui - obstruxi
            Antwort verfassen Antwort mit Zitat verfassen
            –
            Informationen zu den Bewertungsregeln

        2. Silvester-Knaller: Exklusive Akkordeons ohne JavaScript!

          Camping_RIDER E-Mail-Adresse des Autors Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Aloha ;)

          Der Unterschied ist: du kannst alle details-Elemente schließen. In einem Tab-Control kannst Du das nicht.

          Das eine ist ein disclosure-Widget (aufklappbare Zusatzinfos), das andere ein Überlagerungs-Widget (den Namen habe ich mir gerade ausgedacht), mit dem sich Inhalte stapeln lassen und in dem ein Inhaltsblock immer sichtbar ist.

          Schau doch mal in das Beispiel im Blog-Beitrag. Dort lassen sich auch im Tab-Control alle details-Elemente schließen…

          Grüße,

          RIDER

          --
          Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Albers-Zoller
          # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
          Antwort verfassen Antwort mit Zitat verfassen
          –
          Informationen zu den Bewertungsregeln

          1. Silvester-Knaller: Exklusive Akkordeons ohne JavaScript!

            Rolf B
            – Informationen zu den Bewertungsregeln

            Hallo Camping_RIDER,

            und das ist ja wohl nicht das erwünschte Verhalten eines Tab-Controls, oder?

            Rolf

            --
            sumpsi - posui - obstruxi
            Antwort verfassen Antwort mit Zitat verfassen
            –
            Informationen zu den Bewertungsregeln

            1. Silvester-Knaller: Exklusive Akkordeons ohne JavaScript!

              Camping_RIDER E-Mail-Adresse des Autors Homepage des Autors
              – Informationen zu den Bewertungsregeln

              Aloha ;)

              und das ist ja wohl nicht das erwünschte Verhalten eines Tab-Controls, oder?

              Jein. Jedenfalls war das konkrete Beispiel ja das, worüber wir hier sprachen.

              Grüße,

              RIDER

              --
              Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Albers-Zoller
              # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
              Antwort verfassen Antwort mit Zitat verfassen
              –
              Informationen zu den Bewertungsregeln

      2. Silvester-Knaller: Exklusive Akkordeons ohne JavaScript!

        john
        Dieser Beitrag wurde gelöscht: Beitrag ist Spam.

      3. Silvester-Knaller: Exklusive Akkordeons ohne JavaScript!

        Gunnar Bittersmann E-Mail-Adresse des Autors Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@Camping_RIDER

        Immerhin ist es ja so, dass die "Registerkarten" sich (zumindest in meiner Wahrnehmung) nicht wesentlich vom "exklusiven Akkordeon" unterscheiden, oder ich sehe den wesentlichen Unterschied nicht.

        Der ist doch offensichtlich: Registerkarten (Tabs) und Akkordeons sehen völlig unterschiedlich aus. Auch wenn sie ähnliche Zwecke haben, sind es doch verschiedene UI-Elemente.

        Kwakoni Yiquan

        --
        Ad astra per aspera
        Antwort verfassen Antwort mit Zitat verfassen
        –
        Informationen zu den Bewertungsregeln

        1. Silvester-Knaller: Exklusive Akkordeons ohne JavaScript!

          Camping_RIDER E-Mail-Adresse des Autors Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Aloha ;)

          Immerhin ist es ja so, dass die "Registerkarten" sich (zumindest in meiner Wahrnehmung) nicht wesentlich vom "exklusiven Akkordeon" unterscheiden, oder ich sehe den wesentlichen Unterschied nicht.

          Der ist doch offensichtlich: Registerkarten (Tabs) und Akkordeons sehen völlig unterschiedlich aus. Auch wenn sie ähnliche Zwecke haben, sind es doch verschiedene UI-Elemente.

          Der einzige für mich ersichtliche Unterschied ist, dass die Titelleisten, von denen eine „aufgeklappt“ ist, einmal nebeneinander und einmal untereinander stehen.

          Da finde ich den Verhaltensunterschied zwischen Aufklapp-Text und exklusivem Akkordeon schon krasser...

          Grüße,

          RIDER

          --
          Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Albers-Zoller
          # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
          Antwort verfassen Antwort mit Zitat verfassen
          –
          Informationen zu den Bewertungsregeln

          1. Silvester-Knaller: Exklusive Akkordeons ohne JavaScript!

            Gunnar Bittersmann E-Mail-Adresse des Autors Homepage des Autors (Versionen)
            – Informationen zu den Bewertungsregeln

            @@Camping_RIDER

            Da finde ich den Verhaltensunterschied zwischen Aufklapp-Text und exklusivem Akkordeon schon krasser...

            Das exklusive Akkordeon ist schon krass. Das sollte es überhaupt nicht geben.

            Wenn sich beim Aufklappen eines Bereichs ein anderer darüberliegender schließt, scrollt die Seite irgendwohin, je nachdem, wie hoch der gerade geschlossene Bereich war. Nutzer sind irritiert bis völlig orientierungslos. Ein UX-Debakel.

            Kwakoni Yiquan

            --
            Ad astra per aspera
            Antwort verfassen Antwort mit Zitat verfassen
            –
            Informationen zu den Bewertungsregeln