nicht angemeldet
Gunnar Bittersmann@@Tatauiert
Meine Quelle: https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Gestaltung_mit_CSS#Radio-Buttons_verstecken
Im SELFHTML-Wiki steht viel Gutes, aber leider auch noch viel Unsinn. Du bist bei Unsinn gelandet.
.toggle-buttons input[type="radio"]{
visibility:hidden;
}
ist völlig falsch, damit wird das vormals interaktive Element aus dem accessibility tree entfernt und es ist nichts mehr da, was man per Tastatur bedienen kann.
Interaktive Elemente dürfen niemals mit visibility: hidden oder display: none versteckt werden.
Das Beispiel darunter ist also genauso schlecht.
Interaktive Elemente kann man visuell verstecken, sodass sie immer noch bedienbar sind (und auch von Screenreadern angesagt werden).
Und warum ist da ein Rand um der Grafik?
Weil du da img-Elemente ohne src-Attribute hast (was ein Fehler ist) und die werden in Browsern halt als Bilderrahmen dargstellt.
Du müsstest dich entscheiden, ob du die Grafiken als Inhalt (d.h. per img) oder als Hintergrundbilder (der label-Elemente) verwenden willst.
Im ersten Fall müssen die img-Elemente zwingend Alternativtexte (alt-Attribute) haben, bspw.
<label for="…">
<img src="…" alt="Waage"/>
</label>
Wobei „Waage“ dafür nicht der richtige Text ist. Der sollte in dem Fall nicht das Bild beschreiben, sondern die Interaktion, die durch dieses Element ausgelöst wird.
Fürs Umfärben bräuchtest du wohl zwei img-Elemente pro label, von denen jeweils nur eins angezeigt wird.
Im zweiten Fall mit Hinterggrundbild muss auch eine Textalternative vorhanden sein (die visuell versteckt werden kann):
<label>
<span class="visually-hidden">Waage</span>
</label>
mit den oben verlinkten Styles für .visually-hidden.
Mir scheint aber, dass die Verwendung von versteckten Radio-Buttons (Eingabe-Elementen) an sich nicht richtig ist. Was willst du bezwecken?
Zum Auslösen von Aktionen solltest du button-Elemente verwenden.
Ja, data:image ist so schon gewollt.
Echt? Diese verpixelten Bildchen? Das wäre ein typischer Anwendungsfall für Vektorgrafiken.
Auch das Umfärben ist damit kein Problem – ohne dass man dafür zwei Grafiken bräuchte. Beispiel, beschrieben in Teil 1 eines kleinen Tutorials.
In Teil 2 wird gezeigt, wie man alle benötigten Symbole in einem SVG unterbringt.
Weitere Anmerkungen:
<html>
Da fehlt die Angabe der Sprache. Für deutschsprachige Seiten:
<html lang="de">
Und davor muss noch DOCTYPE-Angabe stehen, damit Browser im standardkonformen Modus rendern:
<!DOCTYPE html>
<html lang="de">
<meta http-equiv="content-type" name="viewport" content="width=device-width, user-scalable=no, charset=utf-8" />
user-scalable=no ist keine gute Idee. Nutzern, die Seite vergrößern müssen, um den Text lesen zu können, sollte man diese Möglichkeit nicht wegnehmen. Deshalb ignorieren das etliche Browser auch.
charset=utf-8 ist an der Stelle falsch. Das muss in einem eigenen meta-Element stehen, und zwar am Anfang, also am besten noch vor title:
<!DOCTYPE html>
<html lang="de">
<meta charset="utf-8"/>
<title>…</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style type="text/css"> <!-- ⋮ --> </style>
Die Auskommentierung <!--/--> ist seit mindestens 10 Jahren überflüssig. Weg damit!
</style> </body>
Nö, an der Stelle ist der head zuende, und der body fängt an:
</style>
</head>
<body>
Das </body>-End-Tag kommt vor </html>
😷 LLAP
“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
Der Martin
Tabellenkalk
JürgenB
Rolf B
Matthias Scharwies