Textanzeige nur bei aktivierter Checkbox

[Rolf B]

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.

#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.

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 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?

<button type="button" class="toggle-expand" aria-controls="..." aria-expanded="false"></button>

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