Radio-Button CSS checked Display

[Rolf B]

Hallo Wowbo,

Hallo Leute, der Code so wie er unten ist fuktioniert

Das kannst Du gern behaupten, aber recht hast Du damit nicht. Weder fuktioniert er, noch funktioniert er. Ich hab ihn im Browser aufgerufen, saß davor und fragte mich: hä?

• man erkennt die UI-Elemente nicht. Ein UI muss darstellen, welche Zonen interaktiv sind. Am besten durch Symbole, die dem Anwender vertraut sind. Beispielsweise durch einen Kreis, in den ein schwarzer Punkt eingesetzt wird.
• man erkennt bei Tastaturbedienung nicht, wo der Fokus ist
• ein Screenreader erkennt nicht, dass die Radiobuttons die Spans steuern. Ein Checkbox-/Radiobutton Hack ist nicht zugänglich.

Warum nicht

label { 
  display: block;
}

<fieldset><legend>Anrede</legend>
   <label><input type="radiobutton" name="anrede" value="frau"> Sehr geehrter Herr</label>
   <label><input type="radiobutton" name="anrede" value="herr"> Sehr geehrter Herr</label>
   <label><input type="radiobutton" name="anrede" value="duh"> Sehr geehrte Damen und Herren</label>
</fieldset>

Wenn Radiobuttons und Klartext-Spans weiter voneinander weg stehen, ist die Lösung als CSS Hack ohnehin untauglich, weil sie dem HTML starke Restriktionen auferlegt. Du musst ja die korrekte Geschwisterbeziehung zwischen den Knoten haben (dein DIV hast Du deshalb schon auskommentieren müssen), sonst geht es nicht.

Um da eine brauchbare Lösung vorschlagen zu können, müsstest Du etwas mehr über deine Pläne erzählen.

Frage 1: Was müsste ich machen damit die "Auswahl Anrede" im DIV-Container funktioniert?

Auf den Radiobutton-Hack verzichten. Der gelingt nur, wenn das kontrollierte Element ein Geschwisterelement oder Kind eines Geschwisterelements des Radiobuttons ist. Dein DIV sorgt aber dafür, dass Radiobutton und Span Cousins sind. Das lässt sich mit CSS Selektoren aktuell nicht ausdrücken; das würde den :has() Selektor brauchen, bei dem nicht absehbar ist, ob und wann er jemals in einem Browser auftauchen wird.

Frage 2: Was müsste man machen wenn beim Mann das <b> durch <button> ersetzt würde?

Da bin ich jetzt echt am Grübeln, weil ein Button ein interaktives Element ist, das nicht in ein anderes interaktives Element hinein darf. Aber ist ein Label für ein interaktives Element interaktiv? Das liefere ich nach.

Ansonsten müsste man den Button zum Submit-Button eines Formulars machen, oder per JavaScript einen click-Handler registrieren und im Script dann das tun, was der Button tun soll.

Rolf