Ich sehe überall im Internet zwei Möglichkeiten, wie Leute Checkboxen kodieren, welche ist richtig?
<input id="a" type="checkbox"/><label for="a">checkbox</label> <label for="b"><input id="b" type="checkbox">checkbox</label> Beide funktionieren in Chrome gut, ist ein Browser mehr Cross-over als der andere? Gibt es einen Unterschied?
Beide sind vollkommen korrekt, gültig und zugänglich, solange Sie input und label mit for/id -Attributen verknüpfen, auch wenn input direkt in das Label passt (siehe die beste Antwort auf die Frage, die verknüpft ist von @AramKocharyan und mein Kommentar dort)
Screenreader lesen den zugehörigen Etiketteninhalt, wenn sich der Benutzer auf ein Formularelement (Eingabe, Auswahl oder Textbereich) konzentriert. Wenn sie in einer Form sind, werden sie wahrscheinlich nur Etiketten, Legenden und Knöpfe lesen (ich meine zurücksetzen, senden, Bild oder Knopf), weil JAWS und Ähnliches spezielle Modi haben; ungefähr das Ziel ist, ein Formular zu füllen, nicht den Inhalt wie mit dem Rest einer Webseite zu lesen.
Sie finden oft Formulare mit einem label auf der linken Seite, input auf der Mitte und etwas Hilfe auf der rechten Seite:
input außerhalb des Elements label wird der Hinweis beispielsweise mit einem span codiert. Es wird von Screenreadern nicht gehört, da es nicht Teil einer Schaltfläche label oder Senden ist. Mit einem input innerhalb eines label -Elements können Sie sowohl das Label als auch den Hinweis in das Element label einfügen:
Auf diese Weise wird der Hinweis zusammen mit dem echten Etikett an den AT-Benutzer gelesen.
Hinweis: Natürlich werden Sie die strong und span anders gestalten, sagen bzw.. fett rechtsbündig und kursiv linksbündig. span ist für das Styling nicht notwendig (einfach label stylen und die Hälfte der Regeln für strong abbrechen), aber es ist einfacher (einfacher?):)
Es ist so nützlich für Fehler wie für Hinweise:
%Vor%
Auf diese Weise wird der Fehler an Bildschirmleser gelesen (und Farben, die sie nicht sehen oder kaum sehen können, sind nicht die einzige Möglichkeit, Informationen mit Hilfe dieses Textes an sie zu übermitteln).
Entweder ist richtig.
Labels können Inline-Elemente enthalten (außer anderen Labels). Eingabeelemente sind Inline-Elemente.
imho unten: Jedenfalls würde ich die Checkbox nicht in das Etikett stecken, da es mir irgendwie komisch vorkommt. Labels sollen die Eingabefelder beschriften, eine Beschreibung enthalten, sie nicht enthalten.