checkboxes inside labels?

Question

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?

DEMO

A very good answer here: http://stackoverflow.com/questions/774054/should-i-put-input-tag-inside-label-tag — Aram Kocharyan, Mar 04 '12 at 13:26
Both works in all major browsers, including i.e.6 and opera. — The Alpha, Mar 04 '12 at 13:28

score 12 · Accepted Answer · answered Mar 04 '12 at 14:21

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: johndoe@domain.com

With an 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: johndoe@domain.com</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: johndoe@domain.com</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).

Note: If the for attribute is not specified, but the label element has a labelable element descendant, then the first such descendant in tree order is the label element's labeled control. ([HTML living standard](https://html.spec.whatwg.org/multipage/forms.html#attr-label-for)) — Gqqnbig, Aug 11 '16 at 23:29

score 1 · Answer 2 · answered Mar 04 '12 at 13:30

Either is correct.

Labels may contain inline elements (except other labels). Input elements are inline elements.

imho below: Anyhow, I would not put the checkbox inside the label since it seems kinda weird to me. Labels are meant to label the input fields, hold a description, not to contain them.

checkboxes inside labels?

DEMO

2 Answers2