Toggle-Buttons und background-image bearbeitet von Gunnar Bittersmann 22.05.2021 23:13 @@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. ```css, bad .toggle-buttons input[type="radio"]{ visibility:hidden; } ``` ist **völlig falsch**, damit wird das vormals interaktive Element aus dem *accessibility tree*{:@en} 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](https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/), 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. ```html <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): ```html <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](https://codepen.io/gunnarbittersmann/pen/Ooypov), beschrieben in [Teil 1](https://forum.selfhtml.org/self/2018/aug/23/icon-png-mit-transperenten-hintergrund-mittels-css-faerben/1729891#m1729891) eines kleinen Tutorials. In [Teil 2](https://forum.selfhtml.org/self/2018/aug/23/icon-png-mit-transperenten-hintergrund-mittels-css-faerben/1729898/) wird gezeigt, wie man alle benötigten Symbole in einem SVG unterbringt. --- Weitere Anmerkungen: > ~~~ HTML, bad > <html> > ~~~ Da fehlt die [Angabe der Sprache](https://www.w3.org/International/questions/qa-lang-why). Für deutschsprachige Seiten: ```html <html lang="de"> ``` Und davor muss noch DOCTYPE-Angabe stehen, damit Browser im standardkonformen Modus rendern: ```html <!DOCTYPE html> <html lang="de"> ``` --- > ~~~ HTML, bad > <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`: ```html <!DOCTYPE html> <html lang="de"> <meta charset="utf-8"/> <title>…</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> ``` --- > ```html > <style type="text/css"> > <!-- > ⋮ > --> > </style> > ``` Die Auskommentierung `<!--`/`-->` ist seit mindestens 10 Jahren überflüssig. Weg damit! > ~~~html, bad > </style> > </body> > ~~~ Nö, an der Stelle ist der `head` zuende, und der `body` fängt an: ```html </style> </head> <body> ``` Das `</body>`{:.language-html}-End-Tag kommt vor `</html>`{:.language-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.”*{:@en} —John Lennon {:@en}
Toggle-Buttons und background-image bearbeitet von Gunnar Bittersmann 22.05.2021 23:21 @@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. ```css, bad .toggle-buttons input[type="radio"]{ visibility:hidden; } ``` ist **völlig falsch**, damit wird das vormals interaktive Element aus dem *accessibility tree*{:@en} 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](https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/), 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. ```html <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): ```html <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](https://codepen.io/gunnarbittersmann/pen/Ooypov), beschrieben in [Teil 1](https://forum.selfhtml.org/self/2018/aug/23/icon-png-mit-transperenten-hintergrund-mittels-css-faerben/1729891#m1729891) eines kleinen Tutorials. In [Teil 2](https://forum.selfhtml.org/self/2018/aug/23/icon-png-mit-transperenten-hintergrund-mittels-css-faerben/1729898/) wird gezeigt, wie man alle benötigten Symbole in einem SVG unterbringt. --- Weitere Anmerkungen: > ~~~ HTML, bad > <html> > ~~~ Da fehlt die [Angabe der Sprache](https://www.w3.org/International/questions/qa-lang-why). Für deutschsprachige Seiten: ```html <html lang="de"> ``` Und davor muss noch DOCTYPE-Angabe stehen, damit Browser im standardkonformen Modus rendern: ```html <!DOCTYPE html> <html lang="de"> ``` --- > ~~~ HTML, bad > <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`: ```html <!DOCTYPE html> <html lang="de"> <meta charset="utf-8"/> <title>…</title> ``` --- > ```html > <style type="text/css"> > <!-- > ⋮ > --> > </style> > ``` Die Auskommentierung `<!--`/`-->` ist seit mindestens 10 Jahren überflüssig. Weg damit! > ~~~html, bad > </style> > </body> > ~~~ Nö, an der Stelle ist der `head` zuende, und der `body` fängt an: ```html </style> </head> <body> ``` Das `</body>`{:.language-html}-End-Tag kommt vor `</html>`{:.language-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.”*{:@en} —John Lennon {:@en}
nicht angemeldet nicht angemeldet
