Optgroup zur zusätzlichen Beschriftung einzelner options?

[Camping_RIDER]

Aloha ;)

Ich habe eine Auswahl mit zwei Optionen (Ja-Nein-Auswahl), die aber jeweils einer Beschriftung/Erklärung bedürfen. Gleichzeitig habe ich ein Platzproblem, das ganze sollte im nicht-interaktiven Zustand nicht mehr als eine Zeile und etwa 12em beanspruchen.

Prinzipiell wäre eine checkbox als GUI-Element denkbar - da ist aber das Problem, dass ich damit rein semantisch eigentlich nur die Ja-Auswahl beschriften kann (das label zur Checkbox sollte ja immer die Option beschreiben, die gilt, wenn die Checkbox angehakt ist), die Implikationen der Nein-Auswahl damit zu erklären geht kaum sinnvoll. Und: ich bekomme die Erklärung nicht in 12em unter (klar: man könnte die Erklärung hinter einem Hilfe-Button verstecken o.ä., aber das Problem der fehlenden Erklärung zur Nein-Auswahl bleibt).

Ich dachte dann, es wäre vielleicht clever, ein select-Element zu verwenden - das hat im nicht-interaktiven Zustand eine sehr unspektakuläre Größe und kann durchaus eine Erklärung auch abschneiden, während man im modalen Dialog, also im interaktiven Zustand, die Erklärung gut lesen kann.

Was mir daran nicht gefallen hat: die durch den limitierten Platz abgeschnittene Erklärung ist im zusammengeklappten Zustand nicht wirklich zuträglich, was die Übersichtlichkeit angeht.

Dann habe ich ein wenig rumgegoogelt und bin über optgroup gestolpert. Meine (vielleicht gewagte?) Idee dazu: Ich verwende die Erklärung/Beschriftung als label der optgroup, die jeweils nur eine Option umfasst, also sowas (Pen):

<select size="1">
  <optgroup label="Eines der Pflichtangebote je Stundentafelgruppe muss besucht werden:">
    <option value="0" selected="selected">Pflichtangebot</option>
  </optgroup>
  <optgroup label="Wahlangebote können in beliebiger Zahl zusätzlich besucht werden:">
    <option value="1">Wahlangebot</option>
  </optgroup>
</select>

Die Lösung fühlt sich für mich an wie ein Hack - aber an sich kann ich dem auch semantisch einen Sinn abgewinnen, das label einer optgroup beschriftet ja durchaus (eigentlich zusammenfassend) die nachfolgenden Auswahloptionen.

Das Ergebnis leistet (zumindest auf den ersten Blick, sowohl am Desktop als auch mobil) ziemlich genau das, was ich brauche.

Was haltet ihr von dieser Lösungsmöglichkeit? Ist das ein Hack? Kann man das empfehlen? Gibt es einen Elefanten im Raum, den ich dabei übersehe? Sollte man das eher doch nicht machen?

Dass es Alternativen gibt, ist mir klar (könnte ja auch selbst einen modalen Dialog dazu stricken oder, wie geschrieben, Erläuterungen hinter einem Hilfe-Button verstecken). Allerdings sind die Alternativen mit deutlich mehr Aufwand behaftet, deshalb frage ich mich, ob die oben genannte Lösungsvariante nicht geeignet wäre, um diesen Aufwand einzusparen und Vergleichbares zu erreichen, ich traue aber dem Braten nicht so recht.

Grüße,

RIDER

[Gunnar Bittersmann]

@@Camping_RIDER

Gleichzeitig habe ich ein Platzproblem

Wir reden also nicht über eine Webseite? Auf Webseiten gibt es kein Platzproblem.

Wenn das sowas wie eine Kiosk-Anwendung ist: Welche weiteren Einschränkungen hast du da? Verwendeter Browser?

Und: ich bekomme die Erklärung nicht in 12em unter (klar: man könnte die Erklärung hinter einem Hilfe-Button verstecken o.ä., aber das Problem der fehlenden Erklärung zur Nein-Auswahl bleibt).

Bei dem Hilfe-Button kannst du die Erklärungen für beide Auswahlen unterbringen. Du könntest die Erklärungen auch beim Fokussieren des Eingabeelements (Checkbox oder Auswahlliste mit Kurztiteln für Optionen) automatisch anzeigen und wieder ausblenden, wenn der Fokus woandershin geht. (So als Schnellschuss. Ich müsste nochmal drüber nachdenken, ob das wirklich eine so gute Idee wäre.)

Meine (vielleicht gewagte?) Idee dazu: Ich verwende die Erklärung/Beschriftung als label der optgroup, die jeweils nur eine Option umfasst […] Was haltet ihr von dieser Lösungsmöglichkeit?

Nicht viel. Die Erklärung steht über dem Titel der Option, wo sie doch darunter stehen sollte.

Und noch schlimmer: Die Erklärung wird in mittelhellgrau auf hellgrau gesetzt, ist also kaum lesbar (d.h. für etliche Nutzer gar nicht).

🖖 Live long and prosper

[Felix Riesterer]

Lieber Gunnar,

Und noch schlimmer: Die Erklärung wird in mittelhellgrau auf hellgrau gesetzt, ist also kaum lesbar (d.h. für etliche Nutzer gar nicht).

hilft da auch kein CSS?

Liebe Grüße

Felix Riesterer

[Gunnar Bittersmann]

@@Felix Riesterer

Und noch schlimmer: Die Erklärung wird in mittelhellgrau auf hellgrau gesetzt, ist also kaum lesbar (d.h. für etliche Nutzer gar nicht).

hilft da auch kein CSS?

In Chromia ja, in Firefox und Safari (noch) nicht, AFAIK.

Aber für Chromia gibt es eine bessere Lösung, kommt gleich. Deshalb fragte ich nach dem verwendeten Browser.

🖖 Live long and prosper

[MudGuard]

Hi,

In Chromia ja, in Firefox und Safari (noch) nicht, AFAIK.

also mein select schaut mit etwas CSS

select { color:orange; background: blue; }
optgroup { color:red;background:yellow; }
option { color:blue; background: fuchsia; }

ziemlich bunt aus im Firefox …

(ja, die Farben sind natürlich totaaaaal ernstgemeint …)

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@Gunnar Bittersmann

(Checkbox oder Auswahlliste mit Kurztiteln für Optionen)

Oder was hältst du von einem Schalter? Ja nach Schriftart könnte das geradeso in 12em Breite reinpassen.

Vorteil: beide Optionen sind immer sichtbar.

🖖 Live long and prosper

[Felix Riesterer]

Lieber Gunnar,

mir gefällt die Darstellung, weil sie eindeutig ist. Der Schiebeschalter ist ja mittels CSS darstellbar und animierbar, muss also keine echte Checkbox im Hintergrund sein. Versteckt das Fragezeichen im Kreis ein details-Element hinter seiner unauffälligen Fassade?

Liebe Grüße

Felix Riesterer

[Gunnar Bittersmann]

@@Felix Riesterer

mir gefällt die Darstellung, weil sie eindeutig ist. Der Schiebeschalter ist ja mittels CSS darstellbar und animierbar, muss also keine echte Checkbox im Hintergrund sein.

Wo wir da zwei Labels haben, haben wir auch zwei interaktive Elemente: zwei Radiobuttons, nicht eine Checkbox.

Die Radiobuttons werden visuell versteckt. Dabei nicht vergessen, dass dann die Labels die Fokusmarkierung bekommen müssen:

	label:has(input:focus-visible) {
		outline: medium solid accentColor;
	}

Und genau: der Schalter mit CSS.

Click auf die Labels legt den Schalter um. Aber was soll beim Click auf den Schalter passieren? Ich würde erwarten, er schaltet in den anderen Zustand um. Dazu ist dann ein JavaScript-Einzeiler nötig.

Ich hab das mal als custom element implementiert.

Wie jetzt, ein Click-Event auf einem span? Hat er den Verstand verloren? Nein, das ist ja nur eine zusätzliche Bedienmöglichkeit für Mausschubser. Für Tastaturbediener sind die Labels ausreichend; da würde es sogar stören, wenn der Schalter auch noch ein interaktiver Button wäre.

---

Versteckt das Fragezeichen im Kreis ein details-Element hinter seiner unauffälligen Fassade?

Nö, ich hab da eher ein Popover im Sinn. Per anchor positioning dort, wo halt gerade Platz dafür ist. Im Codepen noch nicht mit drin.

🖖 Live long and prosper

[Felix Riesterer]

Lieber Gunnar,

Ich hab das mal als custom element implementiert.

+1

Versteckt das Fragezeichen im Kreis ein details-Element hinter seiner unauffälligen Fassade?

Nö, ich hab da eher ein Popover im Sinn. Per anchor positioning dort, wo halt gerade Platz dafür ist. Im Codepen noch nicht mit drin.

Habe noch nie mit anchor positioning gearbeitet, kann mir das also noch nicht so richtig vorstellen.

Liebe Grüße

Felix Riesterer

[Gunnar Bittersmann]

@@Felix Riesterer

Habe noch nie mit anchor positioning gearbeitet, kann mir das also noch nicht so richtig vorstellen.

Ich hab letztens mal gezeigt, wozu das gut ist.

Auf meiner Buchclub-Seite setze ich anchor positioning auch ein, um die Jahreszahlen ins Grid zu setzen. (Dabei war ich auf einen Bug in Safari gestoßen. Inzwischen gefixt.)

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Versteckt das Fragezeichen im Kreis ein details-Element hinter seiner unauffälligen Fassade?

Nö, ich hab da eher ein Popover im Sinn. Per anchor positioning dort, wo halt gerade Platz dafür ist. Im Codepen noch nicht mit drin.

So jetzt aber: im neuen Pen

anchor-name und position-anchor hab ich mal zur Verdeutlichung mit dazugeschrieben – und auskommentiert. Das braucht man hier nicht, da ein Popover schon an seinem Steuerelement verankert ist.

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar,

zuerst dachte ich, mein Tablet (Android, Chrome 149) spinnt, weil der Switch funktionslos erschien, aber dann habe ich etwas gegraben.

accentColor ist Teil der CSS Colors 4 Spec, aber nur für Safari/Firefox implementiert. Auf Chromia nicht (es sei denn, man aktiviert ein Experimentalflag), d.h. dafür braucht es einen Herbstrücken^[1]

https://caniuse.com/?search=accentColor

Rolf

---

1. Oder wie übersetzt man Fallback? ↩︎

[Gunnar Bittersmann]

@@Rolf B

zuerst dachte ich, mein Tablet (Android, Chrome 149) spinnt, weil der Switch funktionslos erschien, aber dann habe ich etwas gegraben.

accentColor ist Teil der CSS Colors 4 Spec, aber nur für Safari/Firefox implementiert. Auf Chromia nicht (es sei denn, man aktiviert ein Experimentalflag)

Hm, hatte ich das irgendwann mal gesetzt? Bei mir war der Schalter in blau.

Allerdings färbt der sich auch in Firefox nicht um, wenn man accent-color setzt. Muss ich mir mal ansehen.

Im Codepen jetzt mit custom property.

🖖 Live long and prosper

[MudGuard]

Hi,

dafür braucht es einen Herbstrücken[^1]

Das sollte doch kein Problem sein, gibt doch genügend Rückengeschäfte (Backshops)

😉

cu,
Andreas a/k/a MudGuard

[Felix Riesterer]

Lieber Gunnar,

So jetzt aber: im neuen Pen

in meinem Vanadium (Chrome-Fork) sehe ich keinen Schiebeschalter und damit nicht, welcher Zustand eingestellt ist. Einfach kein Reaktion jedwelcher Art. Nur der Klick/Tap auf das Fragezeichen zeigt eine Reaktion. Will man deshalb die jeweiligen label-Elemente visuell verändern?

Liebe Grüße

Felix Riesterer

[Rolf B]

Hallo Felix,

das klingt nach der alten Version mit accentColor.

Hattest du schon die Version mit var(--accent-color)?

Rolf

[Felix Riesterer]

Lieber Rolf,

das klingt nach der alten Version mit accentColor.

OK jetzt tut's.

Liebe Grüße

Felix Riesterer

[Camping_RIDER]

Aloha ;)

(Checkbox oder Auswahlliste mit Kurztiteln für Optionen)

Oder was hältst du von einem Schalter? Ja nach Schriftart könnte das geradeso in 12em Breite reinpassen.

Vorteil: beide Optionen sind immer sichtbar.

Ja, so eine Alternative hatte ich auch im Kopf. Das sieht gut aus.

Grüße,

RIDER

[Camping_RIDER]

Aloha ;)

Gleichzeitig habe ich ein Platzproblem

Wir reden also nicht über eine Webseite? Auf Webseiten gibt es kein Platzproblem.

Doch, tun wir. Das ist zu pauschal formuliert. Ich habe tatsächlich ein Platzproblem, weil ich zig gleichartige Formularelemente horizontal und vertikal habe, so dass jedes bisschen mehr an standardmäßig sichtbarem Text pro Formularelement die Übersichtlichkeit massiv verringert, während es (aufgrund der Gleichartigkeit) nicht viel Sinn ergibt, den immer gleichen Erklärungstext einzublenden.

Bei dem Hilfe-Button kannst du die Erklärungen für beide Auswahlen unterbringen.

Ja, hatte ich ja auch schon angedeutet. Auch da bleibt es dann trotzdem so, dass der selbe Hilfebutton zigfach auf der Seite ist. Denkbar, aber irgendwie auch nicht optimal.

Du könntest die Erklärungen auch beim Fokussieren des Eingabeelements (Checkbox oder Auswahlliste mit Kurztiteln für Optionen) automatisch anzeigen und wieder ausblenden, wenn der Fokus woandershin geht.

Ja, als drüberschwebender Dialog oder so. Das könnte tatsächlich eine Option sein, ist aber auch nicht ganz einfach, das richtig hinzubekommen, und ist für die Bedienung am Mobilgerät (dank noch eingeschränkterem Platz auf dem Bildschirm) auch nicht ganz einfach richtig zu machen.

Aber wie gesagt: Es ging nicht um gangbare Alternativen - dass es die gibt und wie die aussehen ist mir schon klar, mich interessiert an der Stelle vor allem, was im Detail gegen die einfache, vorgeschlagene Variante spricht.

Die Erklärung steht über dem Titel der Option, wo sie doch darunter stehen sollte.

Sollte sie das?

"Bitte geben Sie hier ihren Namen ein: <EINGABEFELD>"

"Wählen Sie Option A, um Verhalten X auszulösen: <RADIOBUTTON> Option A"

In beiden Fällen kann ich nicht erkennen, dass das zwingend hinter dem Eingabefeld stehen müsste.

Ich verstehe schon was du meinst, frage mich nur, ob das wirklich zwingend so ist oder nicht auch anders verstanden wird.

Und noch schlimmer: Die Erklärung wird in mittelhellgrau auf hellgrau gesetzt, ist also kaum lesbar (d.h. für etliche Nutzer gar nicht).

Das ist ehrlich gesagt ein Problem der schlecht zugänglichen Darstellung im Browser. In Chrome ist das nicht der Fall, im mobilen Chrome auch nicht. Aber ja, optimal ist das nicht, wenn da der Browser dazwischenfunken kann, da gebe ich dir Recht.

Grüße,

RIDER

[Felix Riesterer]

Lieber Camping_RIDER,

Du baust Dir also mit dem select-Element eine visuell kompaktere Variante zu einer Lösung mit <details> und Radio-Buttons samt passender label-Elemente.

<select size="1">
  <optgroup label="Eines der Pflichtangebote je Stundentafelgruppe muss besucht werden:">
    <option value="0" selected="selected">Pflichtangebot</option>
  </optgroup>
  <optgroup label="Wahlangebote können in beliebiger Zahl zusätzlich besucht werden:">
    <option value="1">Wahlangebot</option>
  </optgroup>
</select>

Vergleich

<details>
  <summary>Einstellung: Eines oder mehrere?</summary>
  <p>
    <input id="ein" name="wieviele" value="0" type="radio" checked>
    <label for="ein">Eines der Pflichtangebote je Stundentafelgruppe muss besucht werden</label>
  </p>
  <p>
    <input id="mehr" name="wieviele" value="1" type="radio">
    <label for="mehr">Wahlangebote können in beliebiger Zahl zusätzlich besucht werden</label>
</details>

Deine Lösung hat den Charme, dass die eingestellte Option im zusammengeklappten Zustand sichtbar ist. Beim summary-Element müsste man das per JavaScript nachrüsten. Deine Lösung sieht auch viel pflegeleichter aus. Dass Deine optgroup-Elemente nur eine einzige Option beinhalten, sehe ich nicht als Verstoß gegen die Semantik.

Liebe Grüße

Felix Riesterer

[Camping_RIDER]

Aloha ;)

Deine Lösung hat den Charme, dass die eingestellte Option im zusammengeklappten Zustand sichtbar ist. Beim summary-Element müsste man das per JavaScript nachrüsten. Deine Lösung sieht auch viel pflegeleichter aus. Dass Deine optgroup-Elemente nur eine einzige Option beinhalten, sehe ich nicht als Verstoß gegen die Semantik.

Ja, so mein Gedanke. Und noch ein zweiter Vorteil: Beim Auswählen, wenn man die längere Erklärung gleich mitgeliefert bekommt, ruckelt auf der Seite nichts umeinander, weil der select-Auswahldialog sowieso nicht im Seitenkontext steht. Bei details hätte ich beim Aufklappen eine ziemliche vertikale Verschiebung auf der Seite, außerdem eine horizontale Breiteneinschränkung, die unnötig ist, und man hätte wohl Schwierigkeiten, sich auf der Seite mit vielen gleichartigen Bedienelementen wieder zurechtzufinden, wenn sich das aufgeklappte details dazwischenschiebt und wieder verschwindet.

Klar, könnte man auch alles mit modalen Dialogen regeln. (Werde ich vielleicht auch müssen, im Moment befürchte ich, dass mir mal wieder die Anzahl-Beschränkung der Input-Elemente einen Strich durchs Eingabeformular machen könnte.)

Grüße,

RIDER

[Camping_RIDER]

Aloha ;)

Klar, könnte man auch alles mit modalen Dialogen regeln. (Werde ich vielleicht auch müssen, im Moment befürchte ich, dass mir mal wieder die Anzahl-Beschränkung der Input-Elemente einen Strich durchs Eingabeformular machen könnte.)

Mist. Je länger ich darüber nachdenke, desto sicherer bin ich, dass genau das passieren wird. Ich glaube mein GUI-Prototyp (und damit die Stunden, die da drin stecken) ist eben gestorben. Natürlich ändert das an der Fragestellung hier nichts...

Grüße,

RIDER

[Camping_RIDER]

Aloha ;)

Natürlich ändert das an der Fragestellung hier nichts...

Naja, wie mans nimmt. @Gunnar Bittersmann hatte ja die Constraints in Frage gestellt. Scheint, diese Intuition war gar nicht so verkehrt, weil ich das Platzproblem natürlich nur wegen der zig Eingabefelder auf einer Seite habe, und weil sich das jetzt als unmachbares Konzept herausstellt, steht natürlich die grundsätzliche Platzproblem-Prämisse wirklich in Frage 😉

Grüße,

RIDER

[Gunnar Bittersmann]

@@Camping_RIDER

Ich dachte dann, es wäre vielleicht clever, ein select-Element zu verwenden - das hat im nicht-interaktiven Zustand eine sehr unspektakuläre Größe und kann durchaus eine Erklärung auch abschneiden, während man im modalen Dialog, also im interaktiven Zustand, die Erklärung gut lesen kann.

Was mir daran nicht gefallen hat: die durch den limitierten Platz abgeschnittene Erklärung ist im zusammengeklappten Zustand nicht wirklich zuträglich, was die Übersichtlichkeit angeht.

Die Erklärung bei den Optionen, aber nicht im select button anzeigen (bislang nur in Chromia): ☞ Beispiel

MDN: Customizable select elements

🖖 Live long and prosper

[Camping_RIDER]

Aloha ;)

Die Erklärung bei den Optionen, aber nicht im select button anzeigen (bislang nur in Chromia): ☞ Beispiel

Danke!

MDN: Customizable select elements

Genau, das hatte ich auch schon gefunden. Braucht noch ein wenig, bis das eine praktikabel verwendbare Lösung ist.

Grüße,

RIDER