selbstgebastelte select-Boxen

[marctrix]

Hej alle,

select Boxen selber nachzubauen, weil die nativen nicht so praktisch klickibunti zu machen sind, ist ein absolutes no-go, was jedem inzwischen klar ist, einen tollen Beitrag, der das Thema (erst mal) ziemlich abschließend behandelt, habe ich auf 24a11y.com gefunden. Natürlich auf englisch.

Spoiler-Warnung (weiß hoffentlich eh jeder): das schlimmste, was ihr Nutzern antun könnt ist das native ˋ<select multiple>ˋ.

Wenn ihr gute Gründe habt, die Nutzern die Bedienung einer (web)App erleichtern, dann lest euch unbedingt den Artikel durch, bevor ihr euch selber Auswahl-Boxen erstellt.

Der zweiteilige Artikel geht ausführlich auf die zugrundeliegenden unterschiedlichen Konzepte der diversen Betriebssysteme ein, erläutert Vorgaben der WCAG und endet mit den Ergebnissen von nutzertests, welche zeigen, dass auch die besten selbst erstellten Lösungen schlechter performen als das native select (ohne multiple).

„Select your poison“ von Sarah Higley

Marc

[Linuchs]

weil die nativen nicht so praktisch klickibunti zu machen sind

Mir geht es gar nicht um bunti. Schlimmer ist, dass die Radio- und Checkboxen wie Fliegenschisse in einer größeren Schriftumgebung wirken. Sie sind nicht skalierbar und damit sind select / unselect leicht zu übersehen. Also barrierebehaftet.

Linuchs

[Rolf B]

Hallo Linuchs,

das hat aber nichts mit SELECT zu tun.

Vorschlag für dein Anliegen:

<label class="inputgroup">
   <input type="checkbox">
   <span>Check me out</span>
</label>

Mit CSS kannst Du die Checkbox visuell verstecken und per Checkbox-Hack dem Span ein ::before Element geben - ok, je nach checked Zustand das eine oder das andere - das größer ist und zum Text passt. Eine Webanwendung in meinem Unternehmen macht das so.

Gunnar wird es vermutlich zerreißen, aber hier ist die Idee

Rolf

[Gunnar Bittersmann]

@@Rolf B

Gunnar wird es vermutlich zerreißen, aber hier ist die Idee

Nö, warum denn? Das ist die gängige Methode, eigene Checkboxen (oder Radio-Buttons) zu verwirklichen. Nichts gegen zu sagen – wenn man es denn richtig macht.

Im Web mal nach custom checkbox gesucht und haufennweise Mist gefunden, wo es nicht richtig gemacht wurde. 😡 Bspw. bei W3Schools, wo „vergessen“ wurde, den :focus-Zustand hervorzuheben, ohne den man bei Tastaturbedienung im Blindflug unterwegs ist – unbedienbarer Scheiß.

In dem Zusammenhang wäre hervorzuheben, dass bei

Mit CSS kannst Du die Checkbox visuell verstecken

die Betonung auf „visuell“ liegt und dass damit weder display: none noch visibility: hidden gemeint sind (was Tastaturbedienung unmöglich macht), sondern visuell verstecken.

Gefunden habe ich dann über den Abschnitt Checkboxes and radio buttons den Artikel Replacing radio buttons without replacing radio buttons und diesen Codepen (alles von Heydon).

„Checkbox-Hack“ würde ich das nicht nennen. Die Bezeichnung gilt dann, wenn per Checkbox andere Elemente (das eigene Label zähle ich hier nicht mit dazu) ein- und ausgeblendet werden. Das sollte man nicht tun.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Die Bezeichnung [„Checkbox-Hack“] gilt dann, wenn per Checkbox andere Elemente (das eigene Label zähle ich hier nicht mit dazu) ein- und ausgeblendet werden. Das sollte man nicht tun.

Und im Abschnitt This doesn’t quite feel right liefert Heydon die Begründung:

“But accessibility is only a part of inclusive design. These controls also have to make sense to users; they have to play an unambiguous role within the interface.
“The trouble with using form elements is their longstanding association with the collection of data. That is, checkboxes and radio buttons are established as controls for designating values. When a user checks a checkbox, they may just be switching a state, but they may suspect they are also choosing a value for submission.
“Whether you’re a sighted user looking at a checkbox, a screen reader user listening to its identity being announced, or both, its etymology is problematic. We expect toggle buttons to be buttons, but checkboxes and radio buttons are really inputs.”

LLAP 🖖

[Matthias Apsel]

Hallo Linuchs,

Mir geht es gar nicht um bunti. Schlimmer ist, dass die Radio- und Checkboxen wie Fliegenschisse in einer größeren Schriftumgebung wirken. Sie sind nicht skalierbar und damit sind select / unselect leicht zu übersehen. Also barrierebehaftet.

Das kann ich nicht bestätigen

Aber ich gebe zu, schön ist anders.

Bis demnächst
Matthias

[Rolf B]

Hallo Matthias,

das verpixelte Erscheinungsbild kann ich nicht bestätigen.

Und ich würde keine rem benutzen, sondern mich an das Label anpassen. Dafür braucht's noch ein font-size:inherit:

das dürfte aus jeden Fall besser sein als mein Vorschlag von oben - Frage ist, ob das auch ältere Browser unterstützen.

Rolf

[Matthias Apsel]

Hallo Rolf B,

das verpixelte Erscheinungsbild kann ich nicht bestätigen.

verpixelt ist es tatsächlich nur im Fuchs. In der verchromten Ecke sieht es gut aus.

Und ich würde keine rem benutzen, sondern mich an das Label anpassen. Dafür braucht's noch ein font-size:inherit:

Ja, das war nur mal eben fix zum ausprobieren.

das dürfte aus jeden Fall besser sein als mein Vorschlag von oben - Frage ist, ob das auch ältere Browser unterstützen.

IE11 - IE8 (emuliert) tun es.

Bis demnächst
Matthias

[Linuchs]

Ich habe dieses ausprobiert und der Text zwischen span lässt sich gestalten, hier grün (= okay) hinterlegt:

  label input[type=checkbox]:checked + span {
    padding: 1px 5px;
    background: #cfc;
    border: 1px solid #000;
  }

<label for="rg">
<input
id      = rg
type    = checkbox
...

> <span>rollstuhlgerecht</span></label>

Gerne möchte ich nicht nur den Text, sondern das gesamte label inklusive Checkbox auffällig markieren.

Kann CSS ein Eltern-Element label beeinflussen, wenn sich ein Kind-Element input ändert?

Wenn + span (Kind) funktioniert, wäre - label (Elter) logisch, funktioniert aber nicht.

Linuchs

[Matthias Apsel]

Hallo Linuchs,

Kann CSS ein Eltern-Element label beeinflussen, wenn sich ein Kind-Element input ändert?

derzeit nicht.

Du könntest das label nach dem input notieren.

Bis demnächst
Matthias

[Matthias Apsel]

Hallo Linuchs,

Mir geht es gar nicht um bunti. Schlimmer ist, dass die Radio- und Checkboxen wie Fliegenschisse in einer größeren Schriftumgebung wirken. Sie sind nicht skalierbar und damit sind select / unselect leicht zu übersehen. Also barrierebehaftet.

Im obigen Artikel geht es um select-Boxen. Deren Schriftgröße lässt sich mit CSS festlegen.

Bis demnächst
Matthias

[Linuchs]

Im obigen Artikel geht es um select-Boxen. Deren Schriftgröße lässt sich mit CSS festlegen.

Uups, meine Gedanken waren bei Checkboxen und Radios, und da hatte ich checked und selected gleichgesetzt.

[marctrix]

Hej alle,

select Boxen selber nachzubauen…

Das ist ja eher eine Meldung, von denen ich hier ab und zu mal eine poste. Vielleicht sollte die besser ins Blog, als ins Forum @Matthias Apsel, @Matthias Scharwies?

Marc