Nimm nen label
HTML label wendet sich nicht nur an Screenreader: Minimales CSS für das label-Tag strukturiert Formulare klarer und vergrößert den Hot Spot, den sensiblen Bereich für die Maus oder den Finger.
<label><input type="email" placeholder="Email"></label> <label><input type="search" placeholder="Suchen" results></label> <div class="flex"> <label><input type="checkbox" name="color" value="Rosa"> Rosa</label> <label><input type="checkbox" name="color" value="Lavendel"> Lavendel</label> <label><input type="checkbox" name="color" value="Zitrone"> Zitrone</label> </div>
label muss nicht unbedingt mit einem Text vor dem input-Tag stehen, sondern kann das Eingabefeld einwickeln und die maus- bzw. touch-sensible Fläche vergrößern. HTML label ersetzt auch die kleinen Checkboxen und Radio-Buttons ohne Javascript.
Das alleine macht die kleinen Buttons schon handlicher, aber dieses Verhalten kann man sich für eine größere Ausgabe von Checkboxen und Radio-Buttons zu Nutzen machen.
Klar strukturierte Eingabefelder verringern die Abneigung gegen das Ausfüllen der Eingabefelder. Anstelle von Tabellen oder div-Tags formatiert das label-Tag die Platzierung von Formularfeldern und ihrer Beschriftung.
label {display: block; padding: 1ex; }
.flex label { cursor: pointer }
display:block; verwandelt das inline-Element label in ein Block-Element mit Zeilenumbruch, padding vergrößert die Klickfläche, bei den Checkboxen zeigt der Cursor, dass man nicht auf das winzige Kästchen zielen muss.
Für die vergrößerten Check- und Radioboxen reichen ebenfalls CSS und zwei einfache Bilder: Checkbox und Radiobutton mit CSS.
#checkit2 + label span,
#checkit3 + label span {
background-image: url(ui-checkbox-e.svg);
vertical-align:middle;
width: 30px; height: 30px; display: inline-block;
margin-right: 12px; cursor: pointer;
}
#checkit2:checked + label span,
#checkit3:checked + label span {
background-image: url(ui-checkbox-c.svg);
}
#radio2,
#radio3 {display: none}
#radio2 + label span,
#radio3 + label span {
background-image: url(ui-radio-e.svg);
vertical-align:middle;
width: 30px;
height: 30px;
display: inline-block;
margin-right: 12px; cursor: pointer;
}
#radio2:checked + label span,
#radio3:checked + label span {
background-image: url(ui-radio-c.svg);
}
Größere Checkbox- und Radio-Buttons
Anstelle der epischen Liste von CSS-Eigenschaften für checkbox- und radio-Elemente lassen sie sich mit einem einfachen transform vergrößern.
input[type="radio"],
input[type="checkbox"] {
transform: scale(1.5);
}
Eine kleine Vergrößerung mit transform:scale() ist die einfachste Variante, um zu »greifbaren« Steuerelementen zu kommen. Nur werden die kleinen Symbole bei einem höheren Wert immer unschärfer.
