Question

I see all over the web two ways that people code checkboxes, which one is correct?

1. <input id="a" type="checkbox"/><label for="a">checkbox</label>
2. <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

Answer 1

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: [e-mail]

• 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: [e-mail]</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: [e-mail]</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).