Hallo Matze, man ist verleitet, für sowas den Checkbox-Hack zu verwenden, aber der ist nicht hinreichend zugänglich. - Verwende einen Button statt der Checkbox. - Verwende sprechendere IDs und denke bei mehreren Cards daran, dass eine ID auf der Seite eindeutig sein muss. - Gib dem Button ein `aria-controls`-Attribut und liste darin die IDs auf, deren Sichtbarkeit von diesem Button abhängt (durch Leerzeichen getrennt) - Gib dem Button ein `aria-expanded`-Attribut und setze es initial auf "false" - Die Aria-Attribute sind erforderlich, damit Assistenztechniken wissen, was beim Umschalten passiert. - Schreibe etwas JavaScript, das bei Klick auf den Button den Wert von aria-expanded zwischen "true" und "false" umschaltet - Verwende CSS, um abhängig vom aria-expanded-Wert die gewünschten Elemente sichtbar zu machen. Alternativ kannst Du das auch im JavaScript an Hand von aria-controls steuern, um nicht für jede Schalter/Zeile-Relation eigenes CSS schreiben zu müssen. ~~~css #schalte_rand[aria-expanded=false] ~ ausgabe #line14 { display: none; } ~~~ Eventuell möchtest Du auch den Color-Input verstecken? Dann musst Du aber ein bisschen daran feilen, dass die Controls dabei nicht rumhüpfen... Script - fügt jedem Button mit aria-controls Attribut die aria-expanded-Togglefunktion hinzu. Wenn das für Dich zu viel trifft, gib den Toggle-Buttons ggf. noch eine "toggle" Klasse und ergänze die im Selektor. ~~~js for (const button of document.querySelectorAll("button[aria-controls]") { button.addEventListener("click", function(event) { const expanded = button.getAttribute("aria-expanded"); button.setAttribute("aria-expanded", expanded == "true" ? "false" : "true"); } } ~~~ Den Button kannst Du zum Beispiel, ähnlich wie das unser Wiki [hier](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Radio-Buttons_und_Checkboxen) macht, als Schiebeschalter darstellen, abhängig vom aria-expanded Attribut. Vergiss aber nicht, ihn sinnvoll zu beschriften. Das Wiki zeigt nur die Idee, aber es verwendet eine Checkbox und zeigt den Checkbox-Hack. Nicht machen. Das Wiki ist hier überarbeitungsbedürftig. Ob es zulässig ist, eine Checkbox mit aria-expanded/aria-controls zu versehen, weiß ich nicht. Das vereinfacht die Darstellung. Aber auch dafür brauchst Du JavaScript, das beim Umschalten des checked-Zustands den Wert von aria-expanded passend setzt. Hier wäre der Schiebeschalter-Togglebutton als Button (nicht Checkbox, wie im Wiki). @Gunnar Bittersmann, muss ich hier noch visuell verborgenen Text haben, der den Zustand anzeigt? Der Zustand steckt bereits im aria-expanded, reicht das einem Screenreader schon? ~~~html <button type="button" class="toggle-expand" aria-controls="..." aria-expanded="false"></button> ~~~ ~~~css button.toggle-expand { display: inline-block; position: relative; width: 4em; height: 2em; padding: 0; border: 2px solid red; border-radius: 1em; transition: all .3s ease-in-out; } button.toggle-expand::before { content: " "; display: block; position: absolute; top:-2px; left: -2px; width: 2em; height: 2em; border-radius: 1em; cursor: pointer; background-color: red; transition: all .3s ease-in-out; } button.toggle-expand[aria-expanded=true] { border-color: green; } button.toggle-expand[aria-expanded=true]::before { left: 2em; background-color: green; } ~~~ _Rolf_ -- sumpsi - posui - obstruxi

Hallo Matze, man ist verleitet, für sowas den Checkbox-Hack zu verwenden, aber der ist nicht hinreichend zugänglich. - Verwende einen Button statt der Checkbox. - Verwende sprechendere IDs und denke bei mehreren Cards daran, dass eine ID auf der Seite eindeutig sein muss. - Gib dem Button ein `aria-controls`-Attribut und liste darin die IDs auf, deren Sichtbarkeit von diesem Button abhängt (durch Leerzeichen getrennt) - Gib dem Button ein `aria-expanded`-Attribut und setze es initial auf "false" - Die Aria-Attribute sind erforderlich, damit Assistenztechniken wissen, was beim Umschalten passiert. - Schreibe etwas JavaScript, das bei Klick auf den Button den Wert von aria-expanded zwischen "true" und "false" umschaltet - Verwende CSS, um abhängig vom aria-expanded-Wert die gewünschten Elemente sichtbar zu machen. Alternativ kannst Du das auch im JavaScript an Hand von aria-controls steuern, um nicht für jede Schalter/Zeile-Relation eigenes CSS schreiben zu müssen. ~~~css #schalte_rand[aria-expanded=false] ~ ausgabe #line14 { display: none; } ~~~ Eventuell möchtest Du auch den Color-Input verstecken? Dann musst Du aber ein bisschen daran feilen, dass die Controls dabei nicht rumhüpfen... Script - fügt jedem Button mit aria-controls Attribut die aria-expanded-Togglefunktion hinzu. Wenn das für Dich zu viel trifft, gib den Toggle-Buttons ggf. noch eine "toggle" Klasse und ergänze die im Selektor. ~~~js for (const button of document.querySelectorAll("button[aria-controls]") { button.addEventListener("click", function(event) { const expanded = button.getAttribute("aria-expanded"); button.setAttribute("aria-expanded", expanded == "true" ? "false" : "true"); } } ~~~ Den Button kannst Du zum Beispiel, ähnlich wie das unser Wiki [hier](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Radio-Buttons_und_Checkboxen) macht, als Schiebeschalter darstellen, abhängig vom aria-expanded Attribut. Vergiss aber nicht, ihn sinnvoll zu beschriften. Das Wiki zeigt nur die Idee, aber es verwendet eine Checkbox und zeigt den Checkbox-Hack. Nicht machen. Das Wiki ist hier überarbeitungsbedürftig. Ob es zulässig ist, eine Checkbox mit aria-expanded/aria-controls zu versehen, weiß ich nicht. Das vereinfacht die Darstellung. Aber auch dafür brauchst Du JavaScript, das beim Umschalten des checked-Zustands den Wert von aria-expanded passend setzt. Hier wäre der Schiebeschalter-Togglebutton als Button (nicht Checkbox, wie im Wiki). @Gunnar Bittersmann, muss ich hier noch visuell verborgenen Text haben, der den Zustand anzeigt? Der Zustand steckt ja schon im aria-expanded, reicht das einem Screenreader schon? ~~~html <button type="button" class="toggle-expand" aria-controls="..." aria-expanded="false"></button> ~~~ ~~~css button.toggle-expand { display: inline-block; position: relative; width: 4em; height: 2em; padding: 0; border: 2px solid red; border-radius: 1em; transition: all .3s ease-in-out; } button.toggle-expand::before { content: " "; display: block; position: absolute; top:-2px; left: -2px; width: 2em; height: 2em; border-radius: 1em; cursor: pointer; background-color: red; transition: all .3s ease-in-out; } button.toggle-expand[aria-expanded=true] { border-color: green; } button.toggle-expand[aria-expanded=true]::before { left: 2em; background-color: green; } ~~~ _Rolf_ -- sumpsi - posui - obstruxi

Hallo Matze, man ist verleitet, für sowas den Checkbox-Hack zu verwenden, aber der ist nicht hinreichend zugänglich. - Verwende einen Button statt der Checkbox. - Verwende sprechendere IDs und denke bei mehreren Cards daran, dass eine ID auf der Seite eindeutig sein muss. - Gib dem Button ein `aria-controls`-Attribut und liste darin die IDs auf, deren Sichtbarkeit von diesem Button abhängt (durch Leerzeichen getrennt) - Gib dem Button ein `aria-expanded`-Attribut und setze es initial auf "false" - Die Aria-Attribute sind erforderlich, damit Assistenztechniken wissen, was beim Umschalten passiert. - Schreibe etwas JavaScript, das bei Klick auf den Button den Wert von aria-expanded zwischen "true" und "false" umschaltet - Verwende CSS, um abhängig vom aria-expanded-Wert die gewünschten Elemente sichtbar zu machen. Alternativ kannst Du das auch im JavaScript an Hand von aria-controls steuern, um nicht für jede Schalter/Zeile-Relation eigenes CSS schreiben zu müssen. ~~~css #schalte_rand[aria-expanded=false] ~ ausgabe #line14 { display: none; } ~~~ Eventuell möchtest Du auch den Color-Input verstecken? Dann musst Du aber ein bisschen daran feilen, dass die Controls dabei nicht rumhüpfen... Script - fügt jedem Button mit aria-controls Attribut die aria-expanded-Togglefunktion hinzu. Wenn das für Dich zu viel trifft, gib den Toggle-Buttons ggf. noch eine "toggle" Klasse und ergänze die im Selektor. ~~~js for (const button of document.querySelectorAll("button[aria-controls]") { button.addEventListener("click", function(event) { const expanded = button.getAttribute("aria-expanded"); button.setAttribute("aria-expanded", expanded == "true" ? "false" : "true"); } } ~~~ Den Button selbst kannst Du dann so stylen, dass er wie ein Schalter aussieht. . Achtung, verwende nicht den dort genannten Checkbox-Hack. Der ist nicht zugänglich. Verwende einen Button, aria-expanded und aria-controls. Den Button kannst Du, ähnlich wie das unser Wiki [hier](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Radio-Buttons_und_Checkboxen) macht, als Schiebeschalter darstellen, abhängig vom aria-expanded Attribut. Vergiss aber nicht, ihn sinnvoll zu beschriften. Das Wiki zeigt nur die Idee, aber es verwendet eine Checkbox und zeigt den Checkbox-Hack. Nicht machen. Das Wiki ist hier überarbeitungsbedürftig. ~~~html <button type="button" class="toggle-expand" aria-controls="..." aria-expanded="false"></button> ~~~ ~~~css button.toggle-expand { display: inline-block; position: relative; width: 4em; height: 2em; padding: 0; border: 2px solid red; border-radius: 1em; transition: all .3s ease-in-out; } button.toggle-expand::before { content: " "; display: block; position: absolute; top:-2px; left: -2px; width: 2em; height: 2em; border-radius: 1em; cursor: pointer; background-color: red; transition: all .3s ease-in-out; } button.toggle-expand[aria-expanded=true] { border-color: green; } button.toggle-expand[aria-expanded=true]::before { left: 2em; background-color: green; } ~~~ _Rolf_ -- sumpsi - posui - obstruxi

Hallo Matze, man ist verleitet, für sowas den Checkbox-Hack zu verwenden, aber der ist nicht hinreichend zugänglich. - Verwende einen Button statt der Checkbox. - Verwende sprechendere IDs und denke bei mehreren Cards daran, dass eine ID auf der Seite eindeutig sein muss. - Gib dem Button ein `aria-controls`-Attribut und liste darin die IDs auf, deren Sichtbarkeit von diesem Button abhängt (durch Leerzeichen getrennt) - Gib dem Button ein `aria-expanded`-Attribut und setze es initial auf "false" - Die Aria-Attribute sind erforderlich, damit Assistenztechniken wissen, was beim Umschalten passiert. - Schreibe etwas JavaScript, das bei Klick auf den Button den Wert von aria-expandet zwischen "true" und "false" umschaltet - Verwende CSS, um abhängig vom aria-expanded-Wert die gewünschten Elemente sichtbar zu machen. Alternativ kannst Du das auch im JavaScript an Hand von aria-controls steuern, um nicht für jede Schalter/Zeile-Relation eigenes CSS schreiben zu müssen. ~~~css #schalte_rand[aria-expanded=false] ~ ausgabe #line14 { display: none; } ~~~ Eventuell möchtest Du auch den Color-Input verstecken? Dann musst Du aber ein bisschen daran feilen, dass die Controls dabei nicht rumhüpfen... Script - fügt jedem Button mit aria-controls Attribut die aria-expanded-Togglefunktion hinzu. Wenn das für Dich zu viel trifft, gib den Toggle-Buttons ggf. noch eine "toggle" Klasse und ergänze die im Selektor. ~~~js for (const button of document.querySelectorAll("button[aria-controls]") { button.addEventListener("click", function(event) { const expanded = button.getAttribute("aria-expanded"); button.setAttribute("aria-expanded", expanded == "true" ? "false" : "true"); } } ~~~ Den Button selbst kannst Du dann so stylen, dass er wie ein Schalter aussieht. . Achtung, verwende nicht den dort genannten Checkbox-Hack. Der ist nicht zugänglich. Verwende einen Button, aria-expanded und aria-controls. Den Button kannst Du, ähnlich wie das unser Wiki [hier](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Radio-Buttons_und_Checkboxen) macht, als Schiebeschalter darstellen, abhängig vom aria-expanded Attribut. Vergiss aber nicht, ihn sinnvoll zu beschriften. Das Wiki zeigt nur die Idee, aber es verwendet eine Checkbox und zeigt den Checkbox-Hack. Nicht machen. Das Wiki ist hier überarbeitungsbedürftig. ~~~html <button type="button" class="toggle-expand" aria-controls="..." aria-expanded="false"></button> ~~~ ~~~css button.toggle-expand { display: inline-block; position: relative; width: 4em; height: 2em; padding: 0; border: 2px solid red; border-radius: 1em; transition: all .3s ease-in-out; } button.toggle-expand::before { content: " "; display: block; position: absolute; top:-2px; left: -2px; width: 2em; height: 2em; border-radius: 1em; cursor: pointer; background-color: red; transition: all .3s ease-in-out; } button.toggle-expand[aria-expanded=true] { border-color: green; } button.toggle-expand[aria-expanded=true]::before { left: 2em; background-color: green; } ~~~ _Rolf_ -- sumpsi - posui - obstruxi