selbstgebastelte select-Boxen – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self selbstgebastelte select-Boxen Sat, 25 Jan 20 07:11:27 Z https://forum.selfhtml.org/self/2020/jan/25/selbstgebastelte-select-boxen/1763513#m1763513 https://forum.selfhtml.org/self/2020/jan/25/selbstgebastelte-select-boxen/1763513#m1763513 <p>Hej alle,</p> <p>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.</p> <p>Spoiler-Warnung (weiß hoffentlich eh jeder): das schlimmste, was ihr Nutzern antun könnt ist das native ˋ<select multiple>ˋ.</p> <p>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.</p> <p>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).</p> <p><a href="https://www.24a11y.com/2019/select-your-poison/" rel="nofollow noopener noreferrer">„Select your poison“ von Sarah Higley</a></p> <p>Marc</p> <div class="signature">-- <br> Ceterum censeo Google esse delendam </div> selbstgebastelte select-Boxen Sun, 26 Jan 20 11:16:25 Z https://forum.selfhtml.org/self/2020/jan/25/selbstgebastelte-select-boxen/1763561#m1763561 https://forum.selfhtml.org/self/2020/jan/25/selbstgebastelte-select-boxen/1763561#m1763561 <blockquote> <p>weil die nativen nicht so praktisch klickibunti zu machen sind</p> </blockquote> <p>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.</p> <p><a href="/images/37c25ad4-402d-11ea-8819-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/37c25ad4-402d-11ea-8819-b42e9947ef30.png?size=medium" alt="Checkbox" title="Checkbox" loading="lazy"></a></p> <p>Linuchs</p> selbstgebastelte select-Boxen Mon, 27 Jan 20 06:48:21 Z https://forum.selfhtml.org/self/2020/jan/25/selbstgebastelte-select-boxen/1763587#m1763587 https://forum.selfhtml.org/self/2020/jan/25/selbstgebastelte-select-boxen/1763587#m1763587 <p>Hej alle,</p> <blockquote> <p>select Boxen selber nachzubauen…</p> </blockquote> <p>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 <a href="/users/2" class="mention registered-user" rel="noopener noreferrer">@Matthias Apsel</a>, <a href="/users/3833" class="mention registered-user" rel="noopener noreferrer">@Matthias Scharwies</a>?</p> <p>Marc</p> <div class="signature">-- <br> Ceterum censeo Google esse delendam </div> selbstgebastelte select-Boxen Sun, 26 Jan 20 11:35:28 Z https://forum.selfhtml.org/self/2020/jan/25/selbstgebastelte-select-boxen/1763563#m1763563 https://forum.selfhtml.org/self/2020/jan/25/selbstgebastelte-select-boxen/1763563#m1763563 <p>Hallo Linuchs,</p> <p>das hat aber nichts mit SELECT zu tun.</p> <p>Vorschlag für dein Anliegen:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>inputgroup<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>Check me out<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> </code></pre> <p>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.</p> <p>Gunnar wird es vermutlich zerreißen, aber <a href="https://jsfiddle.net/Rolf_b/kf0dqtnj/" rel="noopener noreferrer">hier ist die Idee</a></p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> selbstgebastelte select-Boxen Sun, 26 Jan 20 11:42:21 Z https://forum.selfhtml.org/self/2020/jan/25/selbstgebastelte-select-boxen/1763564#m1763564 https://forum.selfhtml.org/self/2020/jan/25/selbstgebastelte-select-boxen/1763564#m1763564 <p>Hallo Linuchs,</p> <blockquote> <p>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.</p> </blockquote> <p>Das kann ich nicht bestätigen</p> <p><a href="/images/aeea6504-4030-11ea-b5cd-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/aeea6504-4030-11ea-b5cd-b42e9947ef30.png?size=medium" alt="Screenshot: Per CSS vergrößerter Radiobutton" loading="lazy"></a></p> <p>Aber ich gebe zu, schön ist anders.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> selbstgebastelte select-Boxen Sun, 26 Jan 20 15:11:38 Z https://forum.selfhtml.org/self/2020/jan/25/selbstgebastelte-select-boxen/1763570#m1763570 https://forum.selfhtml.org/self/2020/jan/25/selbstgebastelte-select-boxen/1763570#m1763570 <p>Hallo Linuchs,</p> <blockquote> <p>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.</p> </blockquote> <p>Im obigen Artikel geht es um <code>select</code>-Boxen. Deren Schriftgröße lässt sich mit CSS festlegen.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> selbstgebastelte select-Boxen Mon, 27 Jan 20 04:42:25 Z https://forum.selfhtml.org/self/2020/jan/25/selbstgebastelte-select-boxen/1763583#m1763583 https://forum.selfhtml.org/self/2020/jan/25/selbstgebastelte-select-boxen/1763583#m1763583 <p>@@Rolf B</p> <blockquote> <p>Gunnar wird es vermutlich zerreißen, aber <a href="https://jsfiddle.net/Rolf_b/kf0dqtnj/" rel="noopener noreferrer">hier ist die Idee</a></p> </blockquote> <p>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.</p> <p>Im Web mal nach <em>custom checkbox</em> gesucht und haufennweise Mist gefunden, wo es nicht richtig gemacht wurde. Bspw. bei W3Schools, wo „vergessen“ wurde, den <code>:focus</code>-Zustand hervorzuheben, ohne den man bei Tastaturbedienung im Blindflug unterwegs ist – unbedienbarer Scheiß.</p> <p>In dem Zusammenhang wäre hervorzuheben, dass bei</p> <blockquote> <p>Mit CSS kannst Du die Checkbox visuell verstecken</p> </blockquote> <p>die Betonung auf „visuell“ liegt und dass damit weder <code class="bad">display: none</code> noch <code class="bad">visibility: hidden</code> gemeint sind (was Tastaturbedienung unmöglich macht), sondern <a href="https://a11yproject.com/posts/how-to-hide-content/" rel="nofollow noopener noreferrer">visuell verstecken</a>.</p> <p>Gefunden habe ich dann über den Abschnitt <a href="https://inclusive-components.design/toggle-button/#checkboxesandradiobuttons" lang="en" rel="noopener noreferrer">Checkboxes and radio buttons</a> den Artikel <a href="https://www.sitepoint.com/replacing-radio-buttons-without-replacing-radio-buttons/" lang="en" rel="nofollow noopener noreferrer">Replacing radio buttons without replacing radio buttons</a> und <a href="https://codepen.io/SitePoint/pen/qhCba" rel="noopener noreferrer">diesen Codepen</a> (alles von Heydon).</p> <p>„Checkbox-Hack“ würde ich das nicht nennen. Die Bezeichnung gilt dann, wenn per Checkbox <em>andere</em> Elemente (das eigene Label zähle ich hier nicht mit dazu) ein- und ausgeblendet werden. Das sollte man nicht tun.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“<br> „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“</em><br> —Marc-Uwe Kling </div> selbstgebastelte select-Boxen Sun, 26 Jan 20 11:55:56 Z https://forum.selfhtml.org/self/2020/jan/25/selbstgebastelte-select-boxen/1763565#m1763565 https://forum.selfhtml.org/self/2020/jan/25/selbstgebastelte-select-boxen/1763565#m1763565 <p>Hallo Matthias,</p> <p>das verpixelte Erscheinungsbild kann ich nicht bestätigen.</p> <p>Und ich würde keine rem benutzen, sondern mich an das Label anpassen. Dafür braucht's noch ein font-size:inherit:</p> <p><a href="/images/cb73a102-4032-11ea-9628-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/cb73a102-4032-11ea-9628-b42e9947ef30.png?size=medium" alt="" loading="lazy"></a></p> <p>das dürfte aus jeden Fall besser sein als mein Vorschlag von oben - Frage ist, ob das auch ältere Browser unterstützen.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> Check-Boxen Sun, 26 Jan 20 16:52:23 Z https://forum.selfhtml.org/self/2020/jan/25/selbstgebastelte-select-boxen/1763573#m1763573 https://forum.selfhtml.org/self/2020/jan/25/selbstgebastelte-select-boxen/1763573#m1763573 <p>Ich habe dieses ausprobiert und der Text zwischen <code>span</code> lässt sich gestalten, hier grün (= okay) hinterlegt:</p> <pre><code class="block language-css"> <span class="token selector">label input[type=checkbox]:checked + span</span> <span class="token punctuation">{</span> <span class="token property">padding</span><span class="token punctuation">:</span> 1px 5px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> #cfc<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #000<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <pre><code class="block language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> rg</span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation attr-equals">=</span> checkbox</span> <span class="token attr-name">...</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>rollstuhlgerecht<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> </code></pre> <p>Gerne möchte ich nicht nur den Text, sondern das gesamte <code>label</code> inklusive Checkbox auffällig markieren.</p> <p>Kann CSS ein Eltern-Element <code>label</code> beeinflussen, wenn sich ein Kind-Element <code>input</code> ändert?</p> <p>Wenn <code>+ span</code> (Kind) funktioniert, wäre <code>- label</code> (Elter) logisch, funktioniert aber nicht.</p> <p>Linuchs</p> selbstgebastelte select-Boxen Sun, 26 Jan 20 12:25:53 Z https://forum.selfhtml.org/self/2020/jan/25/selbstgebastelte-select-boxen/1763566#m1763566 https://forum.selfhtml.org/self/2020/jan/25/selbstgebastelte-select-boxen/1763566#m1763566 <p>Hallo Rolf B,</p> <blockquote> <p>das verpixelte Erscheinungsbild kann ich nicht bestätigen.</p> </blockquote> <p>verpixelt ist es tatsächlich nur im Fuchs. In der verchromten Ecke sieht es gut aus.</p> <blockquote> <p>Und ich würde keine rem benutzen, sondern mich an das Label anpassen. Dafür braucht's noch ein font-size:inherit:</p> </blockquote> <p>Ja, das war nur mal eben fix zum ausprobieren.</p> <blockquote> <p>das dürfte aus jeden Fall besser sein als mein Vorschlag von oben - Frage ist, ob das auch ältere Browser unterstützen.</p> </blockquote> <p>IE11 - IE8 (emuliert) tun es.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> selbstgebastelte select-Boxen Sun, 26 Jan 20 17:12:48 Z https://forum.selfhtml.org/self/2020/jan/25/selbstgebastelte-select-boxen/1763574#m1763574 https://forum.selfhtml.org/self/2020/jan/25/selbstgebastelte-select-boxen/1763574#m1763574 <blockquote> <p>Im obigen Artikel geht es um select-Boxen. Deren Schriftgröße lässt sich mit CSS festlegen.</p> </blockquote> <p>Uups, meine Gedanken waren bei Checkboxen und Radios, und da hatte ich <code>checked</code> und <code>selected</code> gleichgesetzt.</p> Check-Boxen Sun, 26 Jan 20 17:32:39 Z https://forum.selfhtml.org/self/2020/jan/25/selbstgebastelte-select-boxen/1763575#m1763575 https://forum.selfhtml.org/self/2020/jan/25/selbstgebastelte-select-boxen/1763575#m1763575 <p>Hallo Linuchs,</p> <blockquote> <p>Kann CSS ein Eltern-Element <code>label</code> beeinflussen, wenn sich ein Kind-Element <code>input</code> ändert?</p> </blockquote> <p>derzeit nicht.</p> <p>Du könntest das label nach dem input notieren.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> selbstgebastelte select-Boxen Thu, 30 Jan 20 10:34:12 Z https://forum.selfhtml.org/self/2020/jan/25/selbstgebastelte-select-boxen/1764011#m1764011 https://forum.selfhtml.org/self/2020/jan/25/selbstgebastelte-select-boxen/1764011#m1764011 <p>@@Gunnar Bittersmann</p> <blockquote> <p>Die Bezeichnung [„Checkbox-Hack“] gilt dann, wenn per Checkbox <em>andere</em> Elemente (das eigene Label zähle ich hier nicht mit dazu) ein- und ausgeblendet werden. Das sollte man nicht tun.</p> </blockquote> <p>Und im Abschnitt <a href="https://inclusive-components.design/toggle-button/#thisdoesntquitefeelright" rel="noopener noreferrer">This doesn’t quite feel right</a> liefert Heydon die Begründung:</p> <p><em lang="en">“But accessibility is only a part of inclusive design. These controls also have to <strong>make sense</strong> to users; they have to play an unambiguous role within the interface.<br> “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 <strong>suspect</strong> they are also choosing a value for submission.<br> “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.”</em></p> <p>LLAP </p> <div class="signature">-- <br> <em>„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“<br> „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“</em><br> —Marc-Uwe Kling </div>