I see all over the web two ways that people code checkboxes, which one is correct?
<input id="a" type="checkbox"/><label for="a">checkbox</label>
<label for="b"><input id="b" type="checkbox">checkbox</label>
They both work fine in Chrome, is one more cross browser than the other? Is there any difference?
Both are perfectly correct, valid and accessible as long as you associate input
and label
with for/id
attributes, even when the input
is right into the label` (see the best answer to the question linked by @AramKocharyan and my comment there)
Screen readers will read the associated label content when its user focus on a form element (input, select or textarea). When in a form, chances are they'll only read labels, legends and buttons (I mean reset, submit, image or button) because JAWS and alike have special modes; roughly the aim is to fill a form, not to read the content as with the rest of a web page.
You'll often find forms with a label
on the left, input
on center and some help on the right:
E-mail [ ] ex: [email protected]
input
outside the label
element, the hint will be coded with a span
for example. It won't be heard by screen readers because it's not part of a label
or submit button.With an input
inside a label
element, you can put both the label and the hint into the label
element:
<label for="email">
<strong>E-mail</strong>
<input type="text" id="email" name="whatever"> <!-- HTML4.01 doctype -->
<span>ex: [email protected]</span>
</label>
That way, the hint will be read to the AT user along with the real label.
Note: of course you'll style the strong
and span
differently, say resp. bold right-aligned and italic left-aligned. span
isn't necessary for styling (just style label
and cancel half of rules for strong
) but it's more simple (simpler?) :)
It's as useful for errors as for hints:
<p class="error>
<label for="email">
<strong>E-mail</strong>
<input type="text" id="email" name="whatever" value="aaa"> <!-- HTML4.01 doctype -->
<span>ERROR: not a valid e-mail address. Example of a valid e-mail: [email protected]</span>
</label>
</p>
.error strong {
color: red;
font-weight: bold;
}
.error input {
border: 1px solid red;
}
.error span {
color: red;
}
That way, the error is read to screen readers (and color that they can't see or barely see isn't the only way of conveying information to them with the help of this text).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With