nicht angemeldet
Matthias Scharwies
Gunnar Bittersmann
Camping_RIDER
Rolf B
JürgenB
Rolf B
Camping_RIDER
Rolf B
Gunnar Bittersmann
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.
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:
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:
So endet 2023 mit einem wirklichen „Silvester-Knaller“ und wir können uns auf 2024 und viel Neues freuen!
@@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
Aloha ;)
Der Abschnitt „Registerkarten“ ist aber kein Knaller, sondern ein Blindgänger. Die Spec sagt ausdrücklich: “it is not conforming to use the
detailselement when attempting to represent another type of control. For example, tab widgets and menu widgets are not disclosure widgets, so abusing thedetailselement 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
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
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
Hallo JürgenB,
ja, aber DANN dem richtigen Aria. Mit Rollen wie tab, tablist und tabpanel.
Rolf
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
Hallo Camping_RIDER,
und das ist ja wohl nicht das erwünschte Verhalten eines Tab-Controls, oder?
Rolf
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
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
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
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
